HTML5 Form validation in Firefox vs. Chrome

Question

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')

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.

What's the error? Seems like that's the critical point here. — isherwood, May 19 '15 at 14:46

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

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()
}

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

edited May 23 '17 at 11:51

Community

1
1

answered May 19 '15 at 14:49

cfnerd

3,658
12
32
44

@codexplorer what does 'not applicable' mean? this is a four year old question so more information might be needed. Chrome 74 came out a month ago, but I just tested it in Chrome [Version 74.0.3729.169 (Official Build) (64-bit)] with jQuery 3.3.1 and it worked. I then upgraded to 3.4.1 and tested again with it still working. If you are seeing something, I can try to adjust the answer but it seems to still work. What version of jQuery are you using? What does your HTML look like? – cfnerd Jun 04 '19 at 15:26
@cfnerd the html is `` and js is `function validateMACA(name) { const $selected = $("input[name=mac]"); $selected[0].setCustomValidity("......"); $selected[0].reportValidity(); $('#net').find(':submit').click(); }` and jQuery is v2.2.4. – codexplorer Jun 05 '19 at 03:28
@codexplorer your code is far different than what was asked/solved. Therefore your issue is different. your`$selected` variable is set to an input, not the entire form like the answer provided. Check the console to see what your issue is. – cfnerd Jun 05 '19 at 05:40
@cfnerd could you shed light on it please? – codexplorer Jun 05 '19 at 05:43
@codexplorer for starters, your `$selected` variable is set to an input. you are also using setCustomValidity, which introduces something different into the equation. – cfnerd Jun 05 '19 at 05:45
@cfnerd I would like to trigger a HTML5 validation after the input for a field is wrong.I thought I could apply the same concept to my question. – codexplorer Jun 05 '19 at 05:55

HTML5 Form validation in Firefox vs. Chrome

1 Answers1

Linked