I am using asp.net mvc Client-Side Validation .
Here I am generating the html of input textboxes dynamically and also adding the validation messages and validation rules dynamically for these inout text boxes.
Html += '<td id="tdMaxCharge" ><input type="number" value="' + ProrataMaximumCharge + '" id="' + prorateinstanceId + '_MaximumCharge" class="pro-rata-val" name="' + id + '.MaximumCharge" />';
Html += "<div><input class='ajax-auto smallTxtEntry1 ui-autocomplete-input valid pro-rata-val temp--uom' placeholder='UOM' data-val='true' data-val-required='Please enter Maximum Charge UOM' display-name='Maximum Charge UOM' id='" + prorateinstanceId + "_MaximumChargeCurrencyName' name='" + id + ".MaximumChargeCurrencyName' type='text' value='" + ProrataCurrencyName + "' autocomplete='off' role='textbox' aria-autocomplete='list' aria-haspopup='true'/>";
Html += "<input data-val='true' data-val-required='Please enter Maximum Charge UOM' id='" + prorateinstanceId + "_MaximumChargeCurrency' name='" + id + ".MaximumChargeCurrency' type='hidden' value=" + ProrataCurrency + " /></div></td></tr>";
Now I have added validations dynamically
$("#" + aProrateinstanceId + "_MaximumCharge").rules('add', { requiredProrataValidation: ["#" + aProrateinstanceId + "_MaximumCharge", 'MaximumCharge is required'] });
Till this point the validations are working properly.But a requirement came like,few validations should be disabled when I select a particular value from drop down and few should work.
I have tried to achieve this
1.by disabling the input text boxes for that particular condition
2.by applying display :none for those textboxes
3.by removing data-val attribute for those textboxes
4.by removing data-val-required attribute .
But still this is applying validations for this condition.
So my main concern is,as I have applied the validations dynamically,But I need help/guidance to remove these applied validations for this drop down change event.
if (selectedvalue == 'Flat') {
$('#tdMaxCharge').hide();
$('#tdMaxCharge').find('input').each(function(){$(this).attr('disabled','disabled') })
}