jQuery 未显示“请填写此字段”答案

【问题标题】：jQuery not showing "Please fill out this field"jQuery 未显示“请填写此字段”
【发布时间】：2019-09-02 11:07:16
【问题描述】：

我有一个包含一些必填字段的表单。提交按钮的 ID 为 add。

我想这样做，如果表单有效，它将运行一个名为stopNavigate()的函数

所以在我的代码中我有：

$("#add").on('click', function(){
    if($('form').first().valid()){
        stopNavigate();
    }
});

但是，当我这样做时，我不再在输入字段上看到“请填写此字段”工具提示。有没有办法让它检查这个？

这是一个jsFiddle 示例。

对于无效输入，所需的输出是

但是，当我推送提交时，jQuery 验证器会尝试接管其错误消息。有没有办法让原生 HTML5 验证工具提示仍然出现？

【问题讨论】：

【解决方案1】：

您正在拦截提交按钮click，这不允许浏览器正确处理表单字段的“必需”（和其他）属性。为了允许浏览器这样做，您需要拦截submit 事件：

$('form').on('submit', function() {
   if($('form').first().valid()){
        stopNavigate();
    }
});

这是一个updated fiddle，证明上述更改按要求工作。

【讨论】：