Firefox与Chrome浏览器中的HTML5表单验证 [英] HTML5 Form validation in Firefox vs. Chrome

问题描述

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

I have a simple contact form that I'm using HTML5 form validation on:

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

要提交表单，我正在按提交按钮做一个JSON post onClick。在Firefox中，表单验证正确，提示用户填写他们错过的空的必填字段。但是，在Chrome中，单击提交按钮将跳过验证并引发错误。有什么我应该改变，以确保Chrome正在关注HTML5表单验证？

To submit the form, I'm doing a JSON post onClick of the submit button. In Firefox, the form validates properly, prompting the user to fill out empty required fields that they have missed. However, in Chrome, clicking on the submit button skips the validation and throws an error. Is there anything I should change to make sure Chrome is paying attention the HTML5 form validation?

$('#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!");
  });
});

任何反馈都将非常感谢。

Any feedback would be very much appreciated.

推荐答案

以下是一个可能有助于您的原因的stackoverflow文章： 如何强制HTML5表单验证而不通过JavaScript / jQuery提交 。它建议以下代码：

Here is a stackoverflow article that might help your cause: How to force a html5 form validation without submitting it via JavaScript/jQuery. It suggests the following code:

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子句，然后按照上面的逻辑进行操作。希望这有助于。

You could add an else clause to then do your logic above. Hope this helps.

这篇关于Firefox与Chrome浏览器中的HTML5表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！