Ggtcf

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],
 "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.

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.