jQuery ajax form submit - multiple post/get requests caused when validation fails
I have a problem where if a form submission (set up to submit via AJAX) fails validation, the next time the form is submitted, it doubles the number of post requests - which is definitely not what I want to happen. I'm using the jQuery ValidationEngine plugin to submit forms and bind validation messages to my fi开发者_C百科elds. This is my code below. I think my problem may lie in the fact that I'm retrieving the form action attribute via $('.form_container form').attr('action') - I had to do it this way as using $(this).attr was picking up the very first loaded form's action attr - however, when i was loading new forms into the page it wouldn't pick up the new form's action correctly, until i removed the $(this) selector and referenced it using the class. Can anyone see what I might be doing wrong here? (Note I have 2 similar form handlers which are loaded on domready, that could also be an issue)
$('input#eligibility').live("click", function(){
$(".form_container form").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: $('.form_container form').attr('action'),
success : function() {
var url = $('input.next').attr('rel');
ajaxFormStage(url);
},
failure : function() {
//unique stuff for this form
}
});
});
//generic form handler - all form submissions not flagged with the #eligibility id
$('input.next:not(#eligibility)').live("click", function(){
$(".form_container form").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: $('.form_container form').attr('action'),
success : function() {
var url = $('input.next').attr('rel');
ajaxFormStage(url);
},
failure : function() {
}
});
});
The problem is that you bind the validation engine twice when you click twice. I'm not very familiar with validationengine but I'm sure that is your problem.
Once the validationEngine has been bound you need to make sure you don't bind it again.
EDIT
OR do this:
$('#eligibility').live("click", function(){
$.validationEngine.submitForm($(".form_container form"),{
ajaxSubmit: true,
ajaxSubmitFile: $('.form_container form').attr('action'),
success : function() {
var url = $('input.next').attr('rel');
ajaxFormStage(url);
},
failure : function() {
}
});
return false;
});
$('input.next:not(#eligibility)').live("click", function(){
$.validationEngine.submitForm($(".form_container form"),{
ajaxSubmit: true,
ajaxSubmitFile: $('.form_container form').attr('action'),
success : function() {
var url = $('input.next').attr('rel');
ajaxFormStage(url);
},
failure : function() {
}
});
return false;
});
精彩评论