设置自定义验证消息制动模式

Question

我似乎对HTML5表单验证有疑问。 当我设置自定义错误消息时，模式似乎不正确，并且该字段将无法验证...

形成

<form action="{PHP_SELF}" method="post" id="register-form" class="register-form">
    <div class="">
        <label for="username">Username</label>
        <input type="text" name="username" id="username"
               value=""
               pattern="^[a-zA-Z0-9\s]{3,20}$"
               required
               data-custom-error="Username can only contain characters and numbers and must be between 3 - 20 characters.">
    </div>
</form>

JavaScript：

(function() {
    let inputs = document.querySelectorAll("#register-form div input");

    for (let input in inputs) {
        if(inputs.hasOwnProperty(input)) {
            let current = inputs[input];

            current.setCustomValidity(current.dataset.customError);

        }
    }
})();

Answer 1

据我了解， setCustomValidity内部设置输入的有效性，但实际上并不会触发UI更新来反映它（我认为它会等待setCustomValidity事件发生）。 您可以通过在表单上调用reportValidity来手动触发它。

相关SO问题

 (function() { let form = document.querySelector('form'); let inputs = document.querySelectorAll("#register-form div input"); for (let input in inputs) { if (inputs.hasOwnProperty(input)) { let current = inputs[input]; current.setCustomValidity(current.dataset.customError); } } form.reportValidity(); })(); 

 <form action="{PHP_SELF}" method="post" id="register-form" class="register-form"> <div class=""> <label for="username">Username</label> <input type="text" name="username" id="username" value="" pattern="^[a-zA-Z0-9\\s]{3,20}$" required data-custom-error="Username can only contain characters and numbers and must be between 3 - 20 characters."> </div> </form> 

编辑：基于评论中的讨论：

 function validate(el){ var form = document.querySelector('form'); var reg = new RegExp(el.dataset.r); if(reg.test(el.value)){ el.setCustomValidity(''); }else{ el.setCustomValidity(el.dataset.errorMessage) } form.reportValidity(); } 

 <form> <input type="text" name="username" onkeyup="validate(this)" data-r="^[a-zA-Z0-9\\s]{3,20}$" data-error-message="Invalid Input" /> </form>