reportValidity () ошибка с пользовательским элементом, связанным с формой - PullRequest
Новая
       5

reportValidity () ошибка с пользовательским элементом, связанным с формой

1 голос
/ 16 января 2020

У меня есть связанный с формой customElement, который управляет своими собственными сообщениями о валидности и валидации. Он работает, как и ожидалось, как член формы; вызов form.reportValidity() поместит соответствующее сообщение об ошибке в соответствующий элемент привязки. Однако вызов customElement.reportValidity() приводит к ошибке: An invalid form control with name='' is not focusable.

Насколько я понимаю, reportValidity() состоит в том, что мы можем вызывать его для отдельных элементов, независимо от того, является ли он членом HTMLFormControlsCollection или нет. Например, вы можете назвать достоверность отчета по следующей сироте input: 

document.querySelector("#foo").reportValidity();
<input id="foo" value="" required>

Так как вышеприведенное работает, я не верю, что я не согласен с каким-либо принципом дизайна.

Мои минимальные наборы репро до связанного с формой пользовательского элемента путем вызова attachInternals и создания shadowDom из одного элемента ввода. Один экземпляр этого пользовательского элемента вложен в элемент формы. Страница загружается и вызывает reportValidity как для формы, так и для пользовательского элемента. Сбой вызова пользовательского элемента: 

class FACE extends HTMLElement {
    static get formAssociated() { return true; }
    constructor() {
        super();
        this.attachShadow({mode:"open"});
        this._internals = this.attachInternals();        
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = `<input id="foo" value="initial">`;
        let errorAnchor = this.shadowRoot.querySelector("#foo");
        this._internals.setValidity({badInput: true}, "Some error message", errorAnchor);
    }

    reportValidity() { // expose reportValidity on the CE's surface
        return this._internals.reportValidity();
    }
}

customElements.define("fa-ce", FACE);
customElements.whenDefined("fa-ce").then(
    () => {
        // reports custom validation message
        document.querySelector("form").reportValidity();
        // "An invalid form control with name='' is not focusable."
        document.querySelector("fa-ce").reportValidity();
    }
);
<form>
    <fa-ce></fa-ce>
</form>

Итак (наиболее вероятно) я делаю что-то не так, и вы могли бы помочь, или это ошибка в (Chrome) пользовательских элементах (FF еще не реализовал attachInternals), или это так, как задумано, и то, что я пытаюсь сделать, не может быть сделано.

1 Ответ

1 голос
/ 16 января 2020

Вам нужно сделать элемент формы внутри shadowDOM фокусируемым
при создании shadowDOM: 

this.attachShadow({
        mode: "open",
        delegatesFocus: true
      });

Кажется, что не работает в SO-фрагменте ...

работает JSFiddle по адресу: https://jsfiddle.net/CustomElementsExamples/cjgk94zv

.

a delegateFocus объяснение JSFiddle по адресу: https://jsfiddle.net/CustomElementsExamples/9n6wtgj7/

как вы сказали: это не работает в FireFox пока (январь 2020)

работает в Chrome, Edge, Safari (последний я не проверял сам )

Другой причиной ошибки может быть скрытое обязательное поле, на котором браузер не может сосредоточиться

<input type="hidden" required />

ceForms

...