Question

I am currently using jquery validate 1.8.1 and my target browser is IE7. I have a form on the main page and the form elements are injected dynamically via AJAX. There is a dropdown box governing the elements in the form, and the form would submit different content depending on what’s selected with this dropdown box.

$('some_pane').load('/remote_location.html', ...);

Hence, I need to instantiate jquery validate dynamically:

var myValidator;
myValidator = $('#myForm').validate();

myValidator.settings.submitHandler = myFormSubmitHandler;
$('#input1inMyForm').rules('add', .....)

All is fine when it dynamically loads for the first time upon page load, and when the form submit, myFormSubmitHandler is called being exactly once.

However, the problem arises when the user select another value in the dropdown box, which would dynamically inject another set of elements into the form, hence instantiating a new validator.

I have done proper clean up before instantiating a new validator and it works in Firefox and Chrome

$('#myForm').data('validator', null);
$('#myForm').unbind('submit');

I have done extensive search on StackOverflow, though I couldn’t come up with a working solution, I could summarize a few key points regarding IE and jQuery

1. you can only unbind events that are binded with jQuery.bind
2. events in IE are stored in events property and I can see that I couldn’t remove the previous onsubmit events. Every time I instantiate a new validator, an extra onsubmit event is being attached to the form.

These are the clean up I have tried, but not working on IE7 for me

$('#myForm').removeAttr('onsubmit');
if( document.detachEvent ) {
    document.getElementById('myForm').detachEvent('onsubmit', myFormSubmitHandler);
}

Much appreciated.

Answer 1

I got by this problem by changing the submit button

<input type="submit" .... >

to instead just a normal button

<input type="button" .... >

and in IE6 it won’t add extra submit handlers as I reinitiate new validator.