HTML5 验证错误消息,未提交表单

html5 validation error message without submitting form

本文关键字:提交 表单 消息 验证 错误 HTML5      更新时间:2023-09-26

我正在开发一个应用程序,其中我在表单中使用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();
            }
        });

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

除了提交表单之外,无法触发本机工具提示。

如果

表单有效,请阻止其提交,如果无效,只需提交它,本机 HTML5 验证就会发生,但无论如何都不会提交表单。

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

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

小提琴