jQuery validator is validating against no longer existing form elements after ajax call

Question

I have a form which dynamically adds or removes input fields depending on certain selections which have been made by the user.

The basic form looks like this, simplified:

<form action="...some/path..." id="MyForm" method="post">

<!-- the first input field is a select list, depending on the selected option, an ajax call will be made to update the div below with new input fields -->

<select name="selectList">
    <option>#1</option>
    <option>#2</option>
    <option>#3</option>
    <option>...</option>
</select>

<div id="UpdateThisSection"></div>

<input type="submit" value="Submit">

</form>

Depending on which option the user picks from the select list, the user will be presented with different input fields, which are rendered in the #UpdateThisSection div.

The input fields for option #1 would be:

• Date Field (required), so the required attribute is set to the input field, as well as the custom data-type="Date" attribute
• Text (optional), no required attribute is set

The input fields for option #2 would be:

• Text (optional), no required attribute set
• Text (optional), no required attribute set

The input fields for option #3 would be:

• Text (optional), no required attribute set
• Numeric (optional), required attribute set, as well as the custom data-type="Numeric" attribute

The jquery validation is implemented like this:

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

$.validator.addMethod("usDate",
            function (value, element) {
                return value.match(/^(0?[1-9]|1[0-2])[/., -](0?[1-9]|[12][0-9]|3[0-1])[/., -](19|20)?\d{2}$/);
            },
            "Please enter a valid date."
        );

$("input[data-type='Date']").each(function () {
    if ($(this).prop("required")) {
        $(this).rules("add",
            {
                usDate: true
            });
     }
});

$("input[data-type='Numeric']").each(function () {
    $(this).rules("add",
        {
            number: true
        });
});

Validation works perfectly fine if I open the form and select any option. The form is being validated the way it should. However, if I change my mind and select a different option from the dropdown, the form is not validating correctly anymore. On submit, I see that the form is being validated with the previous form's requirements.

Looking at the $("#MyForm").validate() object on the console the invalid as well as the submitted property are still holding information of the previous form. What is the easiest way to reset the validator whenever a new ajax call load a new form element?

I tried to reset the form using $("#MyForm").validate().resetForm(); but it didn't clear the properties mentioned above.

Trying to clear the validation as suggested in this stackoverflow-post didn't resolve the issue for me either.

Answer 1

What is the easiest way to reset the validator whenever a new ajax call load a new form element?

In the Ajax success callback, remove all static rules from an element

$("#MyForm").rules( "remove" );
// Then add or re-add some static rules...

Sorry... can't easilly recreate that for a demo.