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.
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 !
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With