以 HTML5 形式显示 JavaScript 中的错误

我有一个包含必填字段的 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
    }
});

我想强制显示 HTML5 错误//show errors line.

如果您想显示验证气泡，首先应提交表单。更改类型button to submit并听submit event.

另请注意，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/ http://jsfiddle.net/m5duh44x/