Jquery Validation : Adding/Removing Rules Dynamically based on dropdown selection

Question

I have a dropdown selector, with values from 1-4. Depending on the selection, subsequent inputs in form are hidden and validation required is removed from each. eg, if 2 is selected, then inputs 1-2 are shown and validation required is added whilst 3-4 are hidden and validation removed.

$("#dropdownSelector").change(function() {
inputtohide = $(this).val();
$('input[id*=conviction]').slice(0, inputtohide).show().rules("add", {required: "#convictions_0:checked" });
$('input[id*=conviction]').slice(inputtohide, 4).hide().rules("remove", {required: "#convictions_0:checked" });
$("#thisform").validate();
});

This works fine, however ( as the documentation for the validation plugin states ) validation is only added for the first element returned.

I understand from other posts , that the following code should add validation to each input:-

$("#thisform").validate();
$("input[id*=conviction]").each(function() {
    $(this).rules("add", {required: "#convictions_0:checked" });

    });

My question is how do I combine the two bits of code ? Any help greatly appreciated, thanks.

Answer 1

You simply need to use the .each() function on your .slice() result in order to iterate over all the elements it returns:

$('input[id*=conviction]').slice(0, inputtohide).each(function(){
    $(this).show().rules("add", {required: "#convictions_0:checked" });
});

$('input[id*=conviction]').slice(inputtohide, 4).each(function(){
    $(this).hide().rules("remove", {required: "#convictions_0:checked" });
});

Hope this helps !