Form Validation with jQuery before submitting via Ajax request

Question

I'm trying to get my form to validate before using an Ajax request to submit the form to my php script. I've looked through stackoverflow and haven't found something that worked.

I have 3 inputs and a submit button:

<input type="text" name="full-name" id="full-name" value="" placeholder="Full Name" />
<input type="text" name="email" id="email" value="" placeholder="Email" />
<textarea name="message" id="message" value="" rows="8" placeholder="Message"></textarea>
<input type="submit" id="contact-submit" class="contact-submit" value="Submit">
<div id="messageResponse" class="center" style="display:none;"></div>

$(document).ready(function() {

    function validator(){
        return $('form').validate();
    }

    $('form').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            dataType: 'html',
            type: 'post',
            url: 'mail.php',
            data: $('#contact-form').serialize(),
            beforeSubmit: validator,
            success: function(responseData) {
                $('#contact-submit').remove();
                $('#messageResponse').fadeIn(1000);
                $('#messageResponse').html(responseData);
            },
            error: function(responseData){
                console.log('Ajax request not recieved!');
            }
        });

        // resets fields
        $('input#full-name').val("");
        $('input#email').val("");
        $('textarea#message').val("");
    })
});

Should I use a plugin for this? All I want is the name, email, and message to validate with a red border-color. It's giving me a big headache and I'm meeting with the client tomorrow to finalize the site. I don't ask questions if I can't find a working solution.

I tried using this as well: jQuery Form Validator Plugin

Answer 1

Is your $('form').validate() referring to the jQuery Validate plugin?

If so, there is absolutely no point in using a submit handler when the jQuery Validate plugin already has the submit event handler callback function built in, and this is exactly where you are supposed to put your ajax.

As per the documentation for the Validate plugin, the submitHandler callback function is:

"Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated."

Try this code, assuming your ajax function is correct:

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // your rules and options,
        submitHandler: function (form) {
            $.ajax({
                dataType: 'html',
                type: 'post',
                url: 'mail.php',
                data: $(form).serialize(),
                success: function (responseData) {
                    $('#contact-submit').remove();
                    $('#messageResponse').fadeIn(1000);
                    $('#messageResponse').html(responseData);
                },
                error: function (responseData) {
                    console.log('Ajax request not recieved!');
                }
            });
            // resets fields
            $('input#full-name').val("");
            $('input#email').val("");
            $('textarea#message').val("");

            return false; // blocks redirect after submission via ajax
        }
    });

});

DEMO: http://jsfiddle.net/kUX2N/

Answer 2

beforeSubmit is an option of the malsup ajaxForm plugin, not jQuery ajax. Execute the ajax only if validator() returns true.

$('form').on('submit', function(e) {
    e.preventDefault();
    if (validator()){
        $.ajax({...});
    }
});

Aside:

Instead of using multiple lines asking jQuery to select the same thing more than once you can use a chain.

$('#messageResponse').fadeIn(1000).html(responseData);

Similarly, for doing the same thing to several elements

$('#full-name, #email, #message').val("");