HTML5 validation before ajax submit

Question

This should be simple, yet it's driving me crazy. I have an html5 form that I am submitting with ajax. If you enter an invalid value, there is a popup response that tells you so. How can I check that the entries are valid before I run my ajax submit?

form:

<form id="contactForm" onsubmit="return false;">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" required placeholder="Name" />
  <label for="subject">Subject:</label>
  <input type="text" name="subject" id="subject" required placeholder="Subject" />
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" required placeholder="[email protected]" />
  <label for="message">Message:</label>
  <textarea name="message" id="message" required></textarea>
  <input type="submit" id="submit"/>
</form>

submit:

$('#submit').click(function(){
    var name = $("input#name").val();
    var subject = $("input#subject").val();
    var email = $("input#email").val();
    var message = $("input#message").val();

    var dataString = 'email=' + email + '&message=' + message + '&subject=' + subject + '&name=' + name ; 

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: dataString,
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});

Solution 1

By default, jQuery doesn't know anything about the HTML5 validation, so you'd have to do something like:

$('#submit').click(function(){
    if($("form")[0].checkValidity()) {
        //your form execution code
    }else console.log("invalid form");
});

Solution 2

If you bind to the submit event instead of click it will only fire if it passes the HTML5 validation.

It is best practice to cache your jQuery selectors in variables if you use it multiple times so you don't have to navigate the DOM each time you access an element. jQuery also provides a .serialize() function that will handle the form data parsing for you.

var $contactForm = $('#contactForm');

$contactForm.on('submit', function(ev){
    ev.preventDefault();

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: $contactForm.serialize(),
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});

Solution 3

If you are using HTML5 form validation you'll have to send the ajax request in the form's submit handler. The submit handler will only trigger if the form validates. What you're using is a button click handler which will always trigger because it has no association with form validation. NOTE: not all browsers support html5 form validation.

Solution 4

I prefer using the jQuery submit handler, you will still get the response to your form with the following method.

jQuery('#contactForm').on('submit', function (e) {
    if (document.getElementById("contactForm").checkValidity()) {
        e.preventDefault();
        jQuery.ajax({
            url: '/some/url',
            method: 'POST',
            data: jQuery('#contactForm').serialize(),
            success: function (response) {
                //do stuff with response
            }
        })
    }
    return true;
});

View more solutions

Comments

[Mr_Green]

return false on submit event, as done by OP, is what I was looking for..

[Laurent DECLERCQ a.k.a Nuxwin]

This should be the accepted answer as HTML5 validations are triggered before submit event. Basically, listening on submit event, then preventing default action should do the job. There is no need to invoke the checkValidity() method as shown in accepted answer because if HTML5 validations don't pass, submit event will not be triggered.

[Laurent DECLERCQ a.k.a Nuxwin]

Returning false (preventing default action)... See the answer from csbarnes which is more accurate.

[Marcelo Agimóvel]

Despite what your saying, it get's fired without any kind of validation. Part of my code: $('#begininstall').on('click',function(){ $('#formbegininstall').submit(); }); $('#formbegininstall').on('submit',function(ev){ ev.preventDefault(); var serializado = $('#formbegininstall').serialize(); $.ajax({

[Marcelo Agimóvel]

I can't edit my previous answer. My problem was I was using a link to submit ajax. All I had to do was replace the link by a submit button.

[eduardo a]

This works, but the minor problem I see with this is that it don't show the pop ups of the elements with the required attribute.