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子句，然后执行上面的逻辑。希望这会有所帮助。

Firefox与Chrome中的HTML5表单验证

1 个答案: