Ajax and form.serialize()

Hello Experts,

Getting to understand how to deal with sending a form via AJAX.
I want to use "form.serialize()" as the form input fields may change from project to project.
Below is the form code and the jQuery script. For some reason the "$(form).serialize();" does not give any values.
I have trying locating it within the outside the function yet nothing seem to work.

Thanks!

<form id="contactForm">
        
    <input type="text" id="name" placeholder="Enter name" inputRequired="required">           

    <input type="text" id="email" placeholder="Enter email" inputRequired="required">   

    <textarea id="message" rows="5" placeholder="Enter your message" inputRequired="required"></textarea>

   <button type="submit" id="form-submit">Submit</button>

   <div id="msgSubmit"></div>

Select allOpen in new window

$(document).ready(function() {
	var form = $('#contactForm');
	var requiredInput = $("#contactForm input[inputRequired], #contactForm textarea[inputRequired]");
	var validEmail = new RegExp(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);	
	
		
		////
		var validateRequired = function(evt) {
			
			$(requiredInput).each(function() {
				
				if (($.trim($(this).val() )=== "") || ($.trim($(this).val()).length <= 2)) {
					
					if ($(this).is('#name')) {					  
						$(this).parent().find(".placeholder").text("Please enter your name");
					}
					$(this).addClass("error");
				} else {
					$(this).removeClass("error");					
				}
			});
		}
		////////
		
		
		////
		var validateEmail = function(evt) {
			
			if($(this).val().match(validEmail)) {
				
					$(this).removeClass("error");
				} else {
					$(this).addClass("error");
					$(this).parent().find(".placeholder").text("Please enter a valid email address");
				}
		}
		////	
		
		
				
		$(requiredInput).blur(validateRequired);
		$("#email").blur(validateEmail);	
	
	$("#contactForm").on("submit", function (evt) {
		evt.preventDefault();
				
		validateRequired.call($(requiredInput),evt);
		
		if (validateRequired.call($(requiredInput),evt) && validateEmail.call($('#email'),evt)) {		
			formError();		
		} else {
			submitForm();		
		}		
	});	
	
	function submitForm() {
		
		var formData = $(form).serialize();		
		
		$.ajax({
			type: "POST",
			url: "inc/form-process.php",
			data: formData,
			success : function(text) {
				
				var name = $("#name").val();
    			var email = $("#email").val();
    			var message = $("#message").val();
				
				if (text == "success") {
					formSuccess();
				} else {
					formError();
				}
			}
		});
	} // end of submitForm function
   
	
	
	function formSuccess(){
		$("#contactForm")[0].reset();
		submitMSG(true, "Message Submitted!")
    }

	function formError(){
		submitMSG(true, "problem sending you request")
	}
	
	function submitMSG(valid, msg){
		if(valid) {
			var msgClasses = "text-success";
		} else {
			var msgClasses = "text-danger";
		}
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
	} // end of submitMSG function
});

Select allOpen in new window