jQuery Plugin Conflict - Validate and jQuery Form

Question

I have a site that uses jQuery Validate (jQuery Validate) and jQuery Form (jQuery Form). My issue is that when I use the success callback on ajaxSubmit, when the success callback gets called on Validate, ajaxSubmit success' callback gets called.

I ajax the form here, and have the submitHandler set to ajaxSubmit under Validate:

/******* Validate Function Options (not complete function) ************/
success: function(label) {
  label.addClass("checked");
}, 
submitHandler: function(form) {
  $(form).ajaxSubmit();
}

/******* AjaxForm Options/Initilization ************/

var options = { 
  target: '#server-response',       
  success: showResponse,
};

$('#consultation-form').ajaxForm(options);

My dilemma is that when validation is successful (calling the success callback on validation) it calls the success callback from AjaxForm options as well. Spent the last hour on here looking around, that's how I found the submitHandler.

JsFiddle here, won't work because of my post, but it's the js and html in entirety. http://jsfiddle.net/UUDb6/

Thanks for any advice you might have.

I think the problem is that both ajaxSubmit and Validate use the same PHP script when they make the call to the server. So both frameworks are listening for a response from the same script. Is it possible to use separate scripts for the ajax and validate parts respectively? — jeffery_the_wind
– jeffery_the_wind, Commented Jul 23, 2012 at 18:43

jeffery_the_wind · Accepted Answer · 2012-07-23 18:48:06Z

2

it looks like you can define a custom URL in the options for jQuery validate and ajax form respectively. eg:

$("#myform").ajaxForm({
   url: "mypage1.php",
   type: "POST",
   ...
 });

$("#myform").validate({
   url: "mypage2.php",
   type: "POST",
   ...
 });

and you can use similar options for $(form).validate(options);

You could make a copy of your PHP callback script and change the name, so the validate function uses one script, and the ajaxSubmit uses another.

answered Jul 23, 2012 at 18:48

jeffery_the_wind

18.3k35 gold badges109 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bstorrie Over a year ago

My validate function doesn't use a php callback script. Actually, they're both just using built in callbacks from js. I could see defining the custom url for the form working, but why would I define the custom url for the validate, since it's just client-side js?

jeffery_the_wind Over a year ago

might you give it a try to see if it works? ;-) Either way it is just one HTML form, so i think you can just use validate for submitting the form too, you don't need to separately use .ajaxForm

bstorrie Over a year ago

Thanks! I eliminated the ajaxform portion, and updated the validate function to look like this: ` $(form).ajaxSubmit({success: showResponse, target: '#server-response'});` Thanks so much!

Collectives™ on Stack Overflow

jQuery Plugin Conflict - Validate and jQuery Form

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related