reportValidity() 与表单关联的 customElement 失败
reportValidity() failure with form-associated customElement
我有一个与表单相关的 customElement,它管理自己的有效性和验证消息。它作为表单成员按预期工作;调用 form.reportValidity()
会将适当的错误消息放置在适当的锚元素上。但是,调用 customElement.reportValidity()
会导致错误:An invalid form control with name='' is not focusable.
我对reportValidity()
的理解是我们可以在单个元素上调用它,无论它是否是HTMLFormControlsCollection
的成员。例如,您可以调用 report validity on the following orphan 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
yet),或者这是设计好的,我想做的事情无法完成。
更新 现在报告了一个错误:
https://bugs.chromium.org/p/chromium/issues/detail?id=1139621&q=%22not%20focusable%22&can=2
此答案可能不再有效。
您需要使表单元素 在内部 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 年 1 月)
适用于 Chrome、Edge、Safari(最后一个我自己没有测试)
错误的另一个原因可能是浏览器无法关注的隐藏必填字段
<input type="hidden" required />
我有一个与表单相关的 customElement,它管理自己的有效性和验证消息。它作为表单成员按预期工作;调用 form.reportValidity()
会将适当的错误消息放置在适当的锚元素上。但是,调用 customElement.reportValidity()
会导致错误:An invalid form control with name='' is not focusable.
我对reportValidity()
的理解是我们可以在单个元素上调用它,无论它是否是HTMLFormControlsCollection
的成员。例如,您可以调用 report validity on the following orphan 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
yet),或者这是设计好的,我想做的事情无法完成。
更新 现在报告了一个错误:
https://bugs.chromium.org/p/chromium/issues/detail?id=1139621&q=%22not%20focusable%22&can=2
此答案可能不再有效。
您需要使表单元素 在内部 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 年 1 月)
适用于 Chrome、Edge、Safari(最后一个我自己没有测试)
错误的另一个原因可能是浏览器无法关注的隐藏必填字段
<input type="hidden" required />