fairycat

Updated:
Created:

Html5 的 setCustomValidity 需要刷新页面的原因

Html5 中丰富了表单的验证,当验证不通过的时候会出现相应的提示。而 setCustomValidity 可以自定义提示内容。使用该方法添加自定义内容后,当经过验证时需要清除自定义内容,否则该输入框一直处于错误状态。

使用不当的情况下,当输入错误内容,提示错误后,再输入正确的内容也不会通过验证。需要刷新页面才能继续使用。这就是对 setCustomValidity 理解错误的原因。

setCustomValidity 会给字段添加一个错误信息,只要这个信息一直存在,那么这个 input 就一直处于未通过验证状态。

<input type="text" pattern="\d{9}" oninvalid="setCustomValidity('Error Massage')" />

当输入错误后,自定义错误信息 Error Massage,然而再改正输入之后,这个信息没有被清空,导致该 input 一直处于错误状态。

<input type="text" pattern="\d{9}" oninvalid="setCustomValidity('Error Massage')" onchange="setCustomValidity('')" />

当输入框内容改变后,需要重置自定义信息 setCustomValidity(''),这样就可以重置输入框的错误状态。

评论

Name

Email

Website

Subject