如何使用jQuery.validate()但依赖于原生Chrome验证提示？

Question

我正在使用jQuery表单验证插件。

我有一个带有HTML5必填属性标记的表单，类似于以下内容：

<form role="form" id="the-form">
   <input name="name" id="name" required>
</form>

我已经成功使用jQuery进行验证：

$("#the-form").validate();

接着，点击按钮会在继续其他操作之前触发有效性检查：

//Request Button clicked    
$("#request-btn").on("click", function() {
    if ($('#the-form').valid()){
        ...everything good... move along
    }
});

我已经实现了完美的逻辑。然而，现在我开始使用jQuery验证插件后，验证警告不再通过浏览器运行。我仍在深入研究，但我猜测该插件有自己的警报类可以进行格式化。

是否有标志来强制jQuery允许本机浏览器警报弹出而不是自己的警报？

新的jQuery验证通知正在破坏我的表单布局屏幕，而Chrome警报正常工作。

编辑：就在发布这篇文章之后，我检查了一下警报，发现现在插入的是以下内容：

<label id="name-error" class="error" for="name">This field is required.</label>

相比之下，据我所知，Chrome处理的是应用程序级别的。

第二次编辑 这个应用将专门针对Chrome，因此我不担心跨浏览器和旧浏览器的兼容性。我只想让Chrome在字段级别上担心验证，并使用jQuery .valid()检查整个表单的有效性，然后再进行操作。

- eko

---

我被这个问题的格式整齐清晰所吸引，想至少点个赞，因为其他新用户的问题都没有这么好的排版...... - nicael

额..谢谢？我猜.. - eko

我认为最好的选择是两者混合使用，让浏览器处理“required”参数，而让jQuery验证插件处理其他字段的验证，或者干脆全部交由jQuery来处理。 - StudioTime

你可以使用HTML5的约束验证APIcheckValidity方法，例如http://jsfiddle.net/E6jhE/5/，完全不需要使用jQuery validate。（我猜测你正在开发一个多页表单，使用单个<form>标签，如果你想要每个阶段都检查有效性，尽管我可能有所误解） - adaam

索引器 $('#blah')[0] 只是从 jQuery 对象表示中提取本机 JavaScript 元素，因此是整个表单。这里有一个简单的例子：http://jsfiddle.net/E6jhE/17/ - adaam

Answer 1

感谢adaam的回答，我能够使用HTML5约束验证的checkValidity方法：

$('#request-btn').bind('click',function(){
    if ($('#the-form')[0].checkValidity()) {
        ...do the magic stuff here... move along...
    }
})

你可以使用HTML5约束验证API的checkValidity方法，例如jsfiddle.net/E6jhE/5，完全不需要jQuery validate。（我猜你正在处理一个多页表单，使用单个<form>标签检查有效性，虽然我可能误解了）- adaam 34分钟前

- eko