jQuery 提交函数不调用 html5 验证

Posted 2023-05-07

【中文标题】jQuery 提交函数不调用 html5 验证

【英文标题】：jQuery submit function doesn't call html5 validation

【发布时间】：2013-10-17 07:45:01

【问题描述】：

我有一个没有<input type="submit"> 的简单html5 表单，因为提交表单的按钮位于表单本身之外。表单中有多个设置了 required="required" 属性的输入。

我将提交的表单外的按钮附有以下代码：

$('#upgrade_submit').click(function()
    $('#cc-form-modal').submit();
    return false;
);

单击按钮时，它不会对必填字段运行正常的 HTML5 验证。我究竟做错了什么？有没有办法在“强制”提交之前检查表单是否有效？

【问题讨论】：

可能相关：***.com/questions/11866910/…

@Sergio 这非常相关。我对公认答案的唯一改进是，如果我能想出一个不需要 HTML5 的解决方案。

【参考方案1】：

我通过添加一个隐藏的提交输入元素来实现我的目标，如下所示：

<input type="submit" class="submit" style="display:none;">

然后我将以下代码附加到我的外部提交处理程序。

$('#upgrade_submit').click(function()
    $('#cc-form-modal .submit').click();
    return false;
);

这将导致 HTML5 的验证运行，显示默认错误消息并且一切正常！

【讨论】：

纯 jQuery 混乱。自 2013 年以来没有其他方法？