SNIPPET CONTACT JS

contact.js

/* ==================================================================
                		Contact Form
================================================================== */

	$("#do-submit-btn").on('click',function() {
	    var proceed = true;
        //simple validation at client's end
        //loop through each field and we simply change border color to red for invalid fields
		$("#contact-form input, #contact-form textarea").each(function(){
			$(this).css('border-color','');
			if(!$.trim($(this).val())){ //if this field is empty
				$(this).css('border','1px solid #FC4848'); //change border color to red
				proceed = false; //set do not proceed flag
			}
			//check invalid email
			var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
			if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
				$(this).css('border','1px solid #FC4848'); //change border color to red
				proceed = false; //set do not proceed flag
			}
		});

		$(".do-home-contact-form #contact-form input, .do-home-contact-form #contact-form textarea").each(function(){
			$(this).css('border-bottom-color','');
			if(!$.trim($(this).val())){ //if this field is empty
				$(this).css({
					"border": "0px solid",
					"border-bottom": "2px solid #FC4848",
				}); //change border color to red
				proceed = false; //set do not proceed flag
			}
			//check invalid email
			var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
			if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
				$(this).css('border-bottom','2px solid #FC4848'); //change border color to red
				proceed = false; //set do not proceed flag
			}
		});

        if(proceed) //everything looks good! proceed...
        {
			//get input field values data to be sent to server
            var post_data = {
				'name'		: $('input[name=name]').val(),
				'email'	: $('input[name=email]').val(),
				'message'		: $('textarea[name=message]').val()
			};
            var output = '';
            //Ajax post data to server
            $.post('contact.php', post_data, function(response){
				if(response.type == 'error'){ //load json data from server and output message
					output = '<div class="error">'+response.text+'</div>';
				}else{
				    output = '<div class="success">'+response.text+'</div>';
					//reset values in all input fields
					$("#contact-form input, #contact-form textarea").val('');
					//$("#contact-form").slideUp(); //hide form after success
				}
				$("#contact-result").hide().html(output).slideDown();
            }, 'json');
        }else{
			$("#contact-result").hide().html('<div class="error">All fields are Required.</div>').slideDown();
		}
    });

    //reset previously set border colors and hide all message on .keyup()
    $("#contact-form input, #contact-form textarea").keyup(function() {
        $(this).css('border','');
        $("#contact-result").slideUp();
    });

});