Ios devices, "required" field and thank you message

Question

I would like to merge two JavaScripts. The first one is using ajax to send message and the second one to alert user about required field in the contact form.

I want to merge this two, maybe with an IF statement, so first to check all fields and then to send message.

1 with ajax JavaScript:

    $('document').ready(function () {
    $('form#contact-form').submit(function () {
        var form = $(this);
        var post_data = form.serialize(); //Serialized the form data for process.php
        $('#loader').html('<img src="../spinner.gif" /> Please Wait...');

        form.fadeOut(500, function () {
            form.html("<h3>Thank you.").fadeIn();
            $('#loader').html('');
        });

        // Normally would use this
        $.ajax({
            type: 'POST',
            url: 'process.php', // Your form script
            data: post_data,
            success: function(msg) {
                form.fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });

        return false;
    });
});

2 alert JavaScript:

 $('document').ready(function () {
    $('form#contact-form').submit(function(e) {

        var ref = $(this).find("[required]");

        $(ref).each(function(){
            if ( $(this).val() == '' )
            {
                alert("Required field should not be blank.");

                $(this).focus();

                e.preventDefault();
                return false;
            }
        });  return true;
    });
});

From the answer below i have create the following code.

I made this link if someone wants to help. The alert works fine but the code not stop. It continue to load the rest code.

https://jsfiddle.net/L8huq1t1/

Answer 1

You can do this by the following code.

function checkValidation() {
        var ref = $(this).find("[required]");
        $(ref).each(function(){
            if ( $(this).val() == '' )
            {
                alert("Required field should not be blank.");
                $(this).focus();
                //e.preventDefault();
                return false;
            }
        });
        return true;
    }
$('document').ready(function () {
    $('form#contact-form').submit(function () {
        if(!checkValidation()) {
            return false;
        }

        var form = $(this);
        var post_data = form.serialize(); //Serialized the form data for process.php
        $('#loader').html('<img src="../spinner.gif" /> Please Wait...');

        form.fadeOut(500, function () {
            form.html("<h3>Thank you.").fadeIn();
            $('#loader').html('');
        });

        // Normally would use this
        $.ajax({
            type: 'POST',
            url: 'process.php', // Your form script
            data: post_data,
            success: function(msg) {
                form.fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });
        return false;
    });
});

But I give you a suggestion to use jquery.validate plugin which is better option. But if you still want to do like this, go ahead this is also works fine.