没有提交表单的html5验证错误消息答案

【问题标题】：html5 validation error message without submitting form没有提交表单的html5验证错误消息
【发布时间】：2014-12-26 19:38:21
【问题描述】：

我正在开发一个应用程序，我在表单中使用 HTML5 字段。为此，我想在按钮单击时触发 html5 字段验证我已经编写了这段代码

 <input type="button" id="btnContactSubmit" class="btn btn-success" value="Submit">

  $('#btnContactSubmit').click(function (e) {

            if ($('#aspnetForm')[0].checkValidity()) {
                e.preventDefault();
                if (flag) {
                    createListItem();
                }
            } else {
                 e.preventDefault();

            }
        });

按钮单击工作正常，但它没有在相关字段上显示错误消息我想在不提交表单的情况下显示错误消息。

【问题讨论】：

@arshad - 不确定按钮上是否真的需要required？
@adeneo: :p 我的错误，删除了“type='button'”
为什么不在输入字段中使用required？ <input required />

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

除了提交表单之外，没有其他方法可以触发原生工具提示。

如果表单有效则阻止提交，如果无效则直接提交，会进行原生HTML5验证，但无论如何也不会提交表单。

您正在阻止这两种情况下的默认操作，因此验证永远不会发生，这样做，它会

$('#btnContactSubmit').click(function (e) {
    if ($('#aspnetForm')[0].checkValidity()) {
        e.preventDefault();
        if (flag) {
            createListItem();
        }
    }
});

FIDDLE

【讨论】：