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

Posted 2023-05-09

【中文标题】jQuery 未显示“请填写此字段”

【英文标题】：jQuery not showing "Please fill out this field"

【发布时间】：2019-09-02 11:07:16

【问题描述】：

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

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

所以在我的代码中我有：

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

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

这是一个jsFiddle 示例。

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

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

【问题讨论】：

@cale_b，是的，我说的是本机所需的消息。

@cale_b，我添加了一个 MCV 示例。

【参考方案1】：

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

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

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