Contact.js

var ContactForm;

var ContactFormData;

function submitForm() {

    ContactFormData = new FormData(ContactForm);

    ContactFormData.append('ContactsName', $('#ContactsName').val());
    ContactFormData.append('ContactsEmail', $('#ContactsEmail').val());
    ContactFormData.append('ContactsPhone', $('#ContactsPhone').val());
    ContactFormData.append('ContactsCompany', $('#ContactsCompany').val());
    ContactFormData.append('ContactsFile', $('#ContactsFile')[0].files[0]);
    ContactFormData.append('ContactsMessage', $('#ContactsMessage').val());

    $('.Contact .LoaderMessage').show();

    $.ajax({

        url: 'vendors/pages/Contact/sendContact.php',
        type: 'POST',
        data: ContactFormData,
        contentType: false,
        processData: false,
        error:

            function(strError) {

                if(strError == 'timeout') {

                    // Do something. Try again perhaps?
                    alert('Seems like there was an error sending your message.');

                }

            },
        success:

            function(data) {alert(data);

                $('.Contact .LoaderMessage').hide();

                $('.ContactForm input').blur(); // Blur inputs

                $('#formSendStatus').html(data);
                $('#formSendStatus').fadeIn().delay(2500).fadeOut(); // Show send status for 2.5 seconds

                $('.ContactForm input[type=text], .ContactForm input[type=email], .ContactForm input[type=tel], .ContactForm input[type=file], .ContactForm textarea').val(''); // Resets

            },
        timeout: 3000

    });

}

$(document).on('submit', ContactForm, function(event) {

    event.preventDefault();

    var sendMessage = validateContact();

    if(sendMessage) {
        submitForm();
    }

});

// Check if inputs are appropriately filled
function validateContact() {

    var sendMessage = true;

    // Name
    if(!$('#ContactsName').val()) {

        $('#ContactsName').attr('placeholder', 'Required *');

        $('#ContactsName').addClass('ContactFormatError');

        $('.ContactButton').addClass('SendMessageFalse');

        setTimeout(function() {

            $('#ContactsName').attr('placeholder', 'Full Name *');
            $('#ContactsName').removeClass('ContactFormatError');
            $('.ContactButton').removeClass('SendMessageFalse');

        }, 1250);

        sendMessage = false;

    }

    // Email
    if(!$('#ContactsEmail').val()) {

        $('#ContactsEmail').attr('placeholder', 'Required *');
        $('#ContactsEmail').addClass('ContactFormatError');
        $('.ContactButton').addClass('SendMessageFalse');

        setTimeout(function() {
            $('#ContactsEmail').attr('placeholder', 'Email Address *');
            $('#ContactsEmail').removeClass('ContactFormatError');
            $('.ContactButton').removeClass('SendMessageFalse');
        }, 1250);

        sendMessage = false;

    }

    if(!$('#ContactsEmail').val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {

        $('#ContactsEmail').val('');
        $('#ContactsEmail').attr('placeholder', 'Incorrect Format *');
        $('#ContactsEmail').addClass('ContactFormatError');
        $('.ContactButton').addClass('SendMessageFalse');

        setTimeout(function() {
            $('#ContactsEmail').attr('placeholder', 'Email Address *');
            $('#ContactsEmail').removeClass('ContactFormatError');
            $('.ContactButton').removeClass('SendMessageFalse');
        }, 1250);

        sendMessage = false;

    }

    // Message
    if(!$('#ContactsMessage').val()) {

        $('#ContactsMessage').attr('placeholder', 'Required *');
        $('#ContactsMessage').addClass('ContactFormatError');
        $('.ContactButton').addClass('SendMessageFalse');

        setTimeout(function() {
            $('#ContactsMessage').attr('placeholder', 'Please include as much information as possible *');
            $('#ContactsMessage').removeClass('ContactFormatError');
            $('.ContactButton').removeClass('SendMessageFalse');
        }, 1250);

        sendMessage = false;

    }

    return sendMessage;

}

// Delegate keypress function onto #ContactsPhone
$(document).on('keypress', '#ContactsPhone', function(event) {

    // If keypress is not backspace/del and not a key [at all (key code 0)] and less than 0 or greater than 9
    if(event.which != 8 && event.which != 0 && event.which < 48 || event.which > 57) {

        $('#ContactsPhone').val('');
        $('#ContactsPhone').attr('placeholder', 'Numbers Only');
        $('#ContactsPhone').addClass('ContactFormatError');

        setTimeout(function() {
            $('#ContactsPhone').attr('placeholder', 'Telephone Number');
            $('#ContactsPhone').removeClass('ContactFormatError');
        }, 1250);

        return false;

    }

});

// File upload input
$(document).on('change', '#ContactsFile', function(event) {

    var file = this.files[0];

    var fileType = file.type;

    var fileName = $(this).val().split('\\').pop(); // Get the value of the file name and remove the rest of the file path

    var fileCount = $(this).get(0).files.length; // Count how many files are selected

    var allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/tiff', 'image/tif']; // Make an array of the allowed extentions

    // Check if file doesn't have allowed extensions
    if(!((fileType == allowedTypes[0]) || (fileType == allowedTypes[1]) || (fileType == allowedTypes[2]) || (fileType == allowedTypes[3]))) {

        $('#ContactFileName').attr('placeholder', 'Images Only');
        $('.ContactFileLabel').addClass('ContactFormatError');
        $('.ContactButton').addClass('SendMessageFalse');

        $('#ContactsFile').replaceWith($('#ContactsFile').val('').clone(true)); // Replace the input with an empty input

        setTimeout(function() {
            $('#ContactFileName').attr('placeholder', 'No image chosen');
            $('.ContactFileLabel').removeClass('ContactFormatError');
            $('.ContactButton').removeClass('SendMessageFalse');
        }, 1250);

    } else {

        if(fileCount == 1) {
            $('#ContactFileName').attr('placeholder', fileName);
        } else if(fileCount > 1) {
            $('#ContactFileName').attr('placeholder', fileCount + ' Images');
        } else if(fileCount == 0) {
            $('#ContactFileName').attr('placeholder', 'No image chosen');
        }

    }

});

// Preventing page from redirecting
$(document).on('dragover', 'html', function(event) {

    event.preventDefault();
    event.stopPropagation();

    $('.ContactFileLabel').css('border', '1px dashed #0006ff');
});

$(document).on('drop dragleave', 'html', function(event) {

    event.preventDefault();
    event.stopPropagation();

    $('.ContactFileLabel').css('border', '1px solid #fff');

});

// Drag enter
$(document).on('dragenter', '.ContactFileContainer', function(event) {

    event.stopPropagation();
    event.preventDefault();

});

// Drag over
$(document).on('dragover', '.ContactFileContainer', function(event) {

    event.stopPropagation();
    event.preventDefault();

    $('.ContactFileLabel').css('border', '1px solid #0006ff');

});

// Drop
$(document).on('drop', '.ContactFileContainer', function(event) {

    event.preventDefault();

    $('.ContactFileLabel').css('border', '1px solid #fff');

    $.each(dataTransfer.files, function(i, file) {
        file.append('ContactsFile', file);
    });

});