jQuery 提交函数不调用 html5 验证

Question

我有一个简单的 HTML5 表单，没有 <input type="submit">因为提交表单的按钮在表单本身之外。表单中有几个输入具有 required="required"属性集。

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

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

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

Answer 1

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

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

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

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

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