Link to home
Start Free TrialLog in
Avatar of Refael
RefaelFlag for United States of America

asked on

Ajax form and jQuery validation

Hello Experts,

Below are two blocks of code:

The first block of code is basically a jQuery form validation.
The second block of code is a code that should process only once the validation has passed successfully.

I am not an expert... what i am trying to understand is where to insert the the second block of code.

I am thinking that this should be in the submit click function yet it needs to check first if the validations has passed meaning there is no errors. Thank you for you help!

var form = $('#vContact');
var formMessages = $('#form-messages');	
	
	var requiredInput = $("#vContact input[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)) {
							  
			  $(this).addClass("error");			  			  
			   evt.preventDefault();
		  } else {
			  $(this).removeClass("error");			  
		  }
		});
	 };
	 
	 var validateEmail = function(evt) {
		
		if($(this).val().match(validEmail)) {
			$(this).removeClass("error");
		} else {
			$(this).addClass("error");			
			evt.preventDefault();
		}
	 };
	 
	 $(requiredInput).blur(validateRequired);
	 $("#email").blur(validateEmail);
	
	
	 $("#submit").click(function(evt) {
		validateRequired.call($(requiredInput),evt);
                validateEmail.call($('#email'),evt);
		
	 });
});

Open in new window




var formData = $(form).serialize();
		
		$.ajax({
			type: 'POST',
			url: $(form).attr('action'),
			data: formData
		})		
		.done(function(response) {
						
			$(formMessages).text(response);
		
			$('#name').val('');
			$('#email').val('');
			$('#phone').val('');
		})

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

 $("#submit").click(function(evt) {
		validateRequired.call($(requiredInput),evt);
                validateEmail.call($('#email'),evt);
		/* HERE *
               return false;
	 });

Open in new window

But you will need to have your validate functions return a value - you don't want to submit unless they pass - so something like

 
$("#submit").click(function(evt) {
		if (validateRequired.call($(requiredInput),evt) && 
                validateEmail.call($('#email'),evt)) {
                   // AJAX HERE
                   // RETURN FALSE - DISABLE DEFAULT SUBMIT PROCESS
		}
	 });

Open in new window


You will of course need to change your validateEmail and validateRequired to return either true or false depending on whether validation succeeded or not.
Avatar of Refael

ASKER

Hello Julian :-)

Thank you. Can I do it like this?

 $("#submit").click(function(evt) {
		 
		if (validateRequired.call($(requiredInput),evt) && validateEmail.call($('#email'),evt)) {
		
			var formData = $(form).serialize();
			
			$.ajax({
				type: 'POST',
				url: $(form).attr('action'),
				data: formData
			})				
			.done(function(response) {
											
				$(formMessages).text(response);
			
				$('#name').val('');
				$('#email').val('');
				$('#phone').val('');
			})
		} else {
			evt.preventDefault();
		}			
			
	 });

Open in new window

Yes - but I wouldn't - it is not good design.

Keep your validation routines doing what they do - checking input. They return values which are then used to decide whether you should fire the AJAX or not.
Avatar of Refael

ASKER

Julian so i should use the "return false" as you did? Is that what you are saying?

$("#submit").click(function(evt) {

               if (validateRequired.call($(requiredInput),evt) && validateEmail.call($('#email'),evt)) {
		
			var formData = $(form).serialize();
			
			$.ajax({
				type: 'POST',
				url: $(form).attr('action'),
				data: formData
			})				
			.done(function(response) {
											
				$(formMessages).text(response);
			
				$('#name').val('');
				$('#email').val('');
				$('#phone').val('');
			})
                         return false;		
		}			
			
	 });

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Refael

ASKER

Sorry Julian I was away. Your solution is great and already is integrated and working as expected. Thank you!
You are welcome.