CODEWITHSUNDEEP
javascriptjqueryajaxvalidationjquery-plugins
bstorrie
bstorrie

Reputation: 161

jQuery Plugin Conflict - Validate and jQuery Form

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.

Upvotes: 1

Views: 802

Answers (1)

jeffery_the_wind
jeffery_the_wind

Reputation: 18238

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.

Upvotes: 2

Related Questions