javascript - HTML5：有没有办法显示输入字段的错误气泡弹出窗口？

Question

我创建了一个带有HTML5特征的表单。我使用setCustomValidity函数自定义错误消息。但是大多数输入字段都需要显示错误消息onfocusout事件。我做了这个代码来实现这一点。

$("form").bind("change" , function(e){
    var ele = e.target;
    if(field.is(":invalid")){
        ele.setCustomValidity(errorMessage);
    }else{
        ele.setCustomValidity('');
    }
});

但是，我不知道如何在这里打开气泡弹出窗口。

Answer 1

是的，有，但是如果它是假的，你需要checkValidity()在表格上然后提交它。这不是最好的代码。

if(!$('form')[0].checkValidity()) {
  $('form').submit();
}

请记住，并非所有浏览器都支持表单验证。我个人会留下验证，因为浏览器拥有它，因为这是用户将习惯的。

Answer 2

最好使用 javascript 库来触发验证，您也可以设置自定义消息进行验证。

参考链接：链接

使用它，您可以触发验证消息onfocusout

从上面的链接下载 CSS 和 JS 并添加到您的 HTML 页面中。根据您的要求添加验证规则。

<input type="text" name="emp_code" id="emp_code" data-rule="emp_code|required"> 

这required是预定义的规则，emp_code是用户创建的自定义规则。

最后一步是初始化库。

<script>
// #form is id of form
new Validator(document.querySelector('#form'), function(err, res) {
   return res;
}
</script>