jquery - 以 HTML5 形式显示 JavaScript 中的错误

Question

我有一个包含必填字段的 HTML5 表单:

<form id="my_form">
    <input type="text" name="myfield1" required>
    <input type="text" name="myfield2" required>
    <input type="text" name="myfield3" required>
    <button type="button" id="my_button">Check</button>
</form>

另外，我有以下 jQuery 代码:

$('#my_button').on('click', function() {
    if ($('#my_form').checkValidity() == false) {
       //show errors
    }
});

我想在 //show errors 行中强制显示 HTML5 错误。

Answer 1

如果你想显示验证气泡，首先应该提交表单。将 button 的类型更改为 submit 并监听 submit 事件。

另请注意，jQuery 没有checkValidity 方法，您应该首先获取原始DOM 元素:

// on submit event browser will validate the form and show the bubbles
$('#my_form').on('submit', function() {
    if (this.checkValidity() == false) {
        return false;
    }

   // ...

});

http://jsfiddle.net/m5duh44x/