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

【问题标题】：HTML5: Is there any way to show error bubble popup for input fields?HTML5：有没有办法显示输入字段的错误气泡弹出窗口？
【发布时间】：2018-01-08 12:57:02
【问题描述】：

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

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

但是，我不知道如何打开此处的气泡弹窗。

【问题讨论】：

我不太明白你的问题。当用户“离开”输入（即：`blur` 事件）时，您是否尝试运行该代码？
@Uby，我附上了图片。
stackoverflow.com/questions/15820780/…

标签： javascript html

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
@AsifAli72090 谢谢。