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

Question

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

            }
        });

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

- Billz

---

@arshad - 不确定在按钮上是否真的需要使用 required？ - adeneo

@adeneo：我的错误，已删除"type='button'"。 - arshad

为什么你的输入字段中不使用“required”？ <input required /> - arshad

Answer 1

除了提交表单，没有其他方法可以触发本地工具提示。

如果表单有效，请防止其提交，如果无效，则只需提交它，将发生本地HTML5验证，但是表单仍不会被提交。

在两种情况下都阻止默认操作，因此验证永远不会发生。像这样做，就可以了。

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

FIDDLE

- adeneo