Firefox 与 Chrome 中的 HTML5 表单验证

Question

我有一个简单的联系表单，我正在使用 HTML5 表单验证：

input.form-control#email(type='email', name='fromEmail', required='required', value='', placeholder='Email')

为了提交表单，我在提交按钮的单击上进行 JSON 发布。在 Firefox 中，表单会正确验证，提示用户填写他们错过的空白必填字段。但是，在 Chrome 中，单击提交按钮会跳过验证并引发错误。我应该更改什么以确保 Chrome 关注 HTML5 表单验证吗？

$('#submit').on('click', function (argument) {
  event.preventDefault();
  utils.postJSON('/form', utils.getJsonFromForm("form#contact-form")).done(function (data) {
    if (data.error) return;
    utils.flash.success("Thanks for contacting us!");
  });
});

非常感谢任何反馈。

Answer 1

这是一篇可能对您的事业有所帮助的 stackoverflow 文章：How to force a html5 form validation without submitting it via JavaScript/jQuery。它建议以下代码：

var $myForm = $('#myForm'); 
if (!$myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.find(':submit').click()
}

您可以添加一个 else 子句，然后执行上面的逻辑。希望这会有所帮助。