Validation works, Ajax works, but they won't work together?

[PhilipK]

I'm working on a contact forum which has jquery based validation using the following plugin

 

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://docs.jquery.com/Plugins/Validation

 

I'm also using an Ajax function to send the information to a script and display a thank you message.

 

I can get both features to work alone but after hours of tinkering am not able to get them to both work at the same time.

 

Here is my javascript code in full.

 

var submit_message = "<p>We will be in touch soon.</p><img id='checkmark' src='http://timeformore.info/discussion/media//2010/12/check-mark-200x200.png' />";

$(function() {  
  $("#commentForm").click(function() {

  	var cname = $("input#name").val();
	var cemail = $("input#email").val();
	var cphone = $("input#phone").val();
	var cmessage = $("textarea#message").val();
	var myaddress = $("input#myaddress").val();

	var dataString = 'name='+ cname + '&email=' + cemail + '&phone=' + cphone + '&message=' + cmessage + '&myaddress=' + myaddress;
	//alert (dataString);return false;

		$("#commentForm").validate();

	});




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

	$('#contact_form').hide('slow');
	$('#message').html(submit_message) 
	return false;

	$.ajax({
      type: "POST",
      url: "mailform.php",
      data: dataString,
     });
	});




  });	

 

 

I have made versions of each alone to show that they work.

 

Validation --> http://philipk.ca/Emilio/contact.html

 

Ajax --> http://philipk.ca/Emilio2/contact.html

 

 

If anyone can help me with this I would hugely appreciate it!

[fugix]

sidenote, I never encourage from validation using javascript, as the user can disable this in their browser settings, which in turn disables your form validation and can lead to unwanted results in your db. I encourage using PHP to validate forms.

[PhilipK]

Thanks Fugix,

 

The php script will be built in such a way that it does not function if information has not been passed to the form.

 

I think Javascript validation is best for user experience because users don't have to keep reloading pages in the case that they make lots of mistakes.

[Omirion]

Why the encapsulation?

 

$(function() {  

[Omirion]

Also your ajax func is incorrect.

 

The data needs to be a key:pair array.

 

{key:'val' , key2:'val'}

 

 

hmm scratch that it can be as you typed it... try the key:pair method though. Might work.

 

Can you trace where exactly the error is?

That is the ajax trying to send any info and not able too, or is the link broken on the PHP side.

[Omirion]

Oooooooh I see.

 

I think the because you are devclaring the dataString in the previous function in is lost to the ajaxFunc.

 

Try declaring

var dataString

 

Above the first func, that is to say

$(function() {  
var dataString
  $("#commentForm").click(function() {

 

Then load the data into the data string from  within the func without using var like so.

dataString = foo.

 

 

I think this should solve you problem.

Basicly it is a variable scope problem.

Happens often with Ajax

[Adam]

Happens often with Ajax

 

Hmm, why notably AJAX? Scope issues can occur in any scope, you just need to reference something that's out of scope.

[PhilipK]

Oooooooh I see.

 

I think the because you are devclaring the dataString in the previous function in is lost to the ajaxFunc.

 

Try declaring

var dataString

 

Above the first func, that is to say

$(function() {  
var dataString
  $("#commentForm").click(function() {

 

Then load the data into the data string from  within the func without using var like so.

dataString = foo.

 

 

I think this should solve you problem.

Basicly it is a variable scope problem.

Happens often with Ajax

 

I made your suggested updates and uploaded it to...

 

http://philipk.ca/Emilio2/contact.html

 

It is skipping over the first part of the code and sends the request even if no fields are filled out.

 

I have also tried using...

 

success: function(){

[Omirion]

@mrAdam

 

Well, in my experience whenever i deal with AJAX i almost always have SOME kind of scope problem.

Maybe it's the fact that with AJAX you always have funcs within funcs, or maybe it's my general good luck

 

@Phill

I think i might know where the problem is, I just installed ubuntu and i dont have my apps up yet, i'll go find firebug and i'll check out the form.

In the meanwhile can you place a couple of alerts here and there to troubleshoot.

 

So are you reciving all the information from the forms?

 

From what i understand just the validation isn't working right?

The ajax bit is now doing everthing corectly?

[PhilipK]

@Omirion

 

Yes that is right.

 

However I should note again that if I remove the Ajax code then validation works.

 

I have a version of the site which shows the validation working at...

 

Validation --> http://philipk.ca/Emilio/contact.html

 

 

Thanks for helping me with this.

[Omirion]

No problem.

 

I don't see the validation working on the page you posted...

Can you post your validation code? Or is it a JQ thing...

[Omirion]

Ok i got firebug and i still don't see the validation working on the page you posted.

 

I get the error:

Validate() is not a function

[PhilipK]

@Omirion

 

Did you see if it validates on the version in which I removed the Ajax?

 

http://philipk.ca/Emilio/contact.html

 

The Validate function is part of the JQuery Plugin I'm using

 

 <script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 

 

[Omirion]

Yeah i was just reading it's documentation.

 

Yeah i just tried the pahe it works.

But in any case i think found a lead.

 

$(".selector").validate({
   submitHandler: function(form) {
   	$(form).ajaxSubmit();
   }
})

 

So basicly i think you need to remove the validation from the first func insert the above snippet in the second func after your animation.

 

Where

   	$(form).ajaxSubmit();

is to be replaced with your ajax setup.

 

[PhilipK]

@Omirion

 

Sorry I'm slightly confused as to where to insert the code you posted.

 

Could you edit into my copy of the code.

 

 

 

BTW do you have website or twitter or something you want to promote that I can give a shout out to?

[Omirion]

I think this should do the trick.

 

Nah, nothing so big i would like to promote, thanks for the offer non the less

var submit_message = "<p>We will be in touch soon.</p><img id='checkmark' src='http://timeformore.info/discussion/media//2010/12/check-mark-200x200.png' />";

$(function() {  
var dataString
  $("#commentForm").click(function() {

  	var cname = $("input#name").val();
	var cemail = $("input#email").val();
	var cphone = $("input#phone").val();
	var cmessage = $("textarea#message").val();
	var myaddress = $("input#myaddress").val();

	dataString = 'name='+ cname + '&email=' + cemail + '&phone=' + cphone + '&message=' + cmessage + '&myaddress=' + myaddress;
	//alert (dataString);return false;	
	});
  $("#submit").click(function() {

	$('#contact_form').hide('slow');
	$('#message').html(submit_message) 
	return false;

$("#commentForm").validate({
   submitHandler: function() {
   	$.ajax({
      type: "POST",
      url: "mailform.php",
      data: dataString,
     });
   }
})

	});




  });	

[PhilipK]

@Omirion

 

Huge Kudos.

 

Plan today was to be working on this but thanks to you I'm done 9:30am.

 

I owe you one.

[Omirion]

No probs mate, glad i could help out