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库来触发验证，还可以设置自定义消息进行验证。

参考链接：Link

使用此功能，您可以在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>