Validate a couple of dependent select lists with plugin jquery validate - jquery-validate

Question

As the title said, I need to validate 2 dependent select lists with the jQuery Validator Plugin, to force website users to choose an option from all 2 fields (they have to become required fields).
If you see the html you can read a "disabled" tag on the second list, which will removed when user select one of the list1 option.
Here's the simplyfied code of the form
<form action="/index.php" method="post" id="XTspSearchForm132" >
<select class='sid_list1' name='to_sid_list_1321' id='extparent_1321' style='margin-top:4px;'><option style="" value="" selected="selected">- Seleziona categoria -</option><option style="" value="spc55" class="spc63" >Africa del Sud</option><option style="" value="spc56" class="spc63" >Nord America e Caraibi</option><option style="" value="spc57" class="spc63" >America Centrale</option><option style="" value="spc58" class="spc63" >Sud America</option><option style="" value="spc59" class="spc63" >Isole del Pacifico</option><option style="" value="spc60" class="spc63" >Oceano Indiano</option><option style="" value="spc61" class="spc63" >Penisola Arabica</option></select>
<select class='sid_list2' name='to_sid_list_1322' id='extparent_1322' style='margin-top:4px;'><option style="" value="" selected="selected" disabled="disabled">- Seleziona categoria -</option><option style="" value="spc62" class="spc55" >Botswana</option><option style="" value="spc64" class="spc55" >Mauritius e Seychelles</option><option style="" value="spc65" class="spc55" >Mozambico</option><option style="" value="spc66" class="spc55" >Namibia</option><option style="" value="spc67" class="spc55" >Zimbabwe e Zambia</option><option style="" value="spc68" class="spc55" >Sudafrica</option><option style="" value="spc69" class="spc56" >Anguilla</option><option style="" value="spc70" class="spc56" >Antigua e Barbados</option><option style="" value="spc71" class="spc56" >Aruba</option><option style="" value="spc72" class="spc56" >Bahamas</option><option style="" value="spc73" class="spc56" >Bermuda</option><option style="" value="spc74" class="spc56" >Giamaica</option><option style="" value="spc75" class="spc56" >Repubblica Dominicana</option><option style="" value="spc76" class="spc56" >St Lucia</option><option style="" value="spc77" class="spc56" >St Martin</option><option style="" value="spc78" class="spc56" >Turks and Caicos</option><option style="" value="spc79" class="spc56" >US & British Virgin Islands</option><option style="" value="spc80" class="spc56" >Canada</option><option style="" value="spc81" class="spc56" >Canouan Island</option><option style="" value="spc82" class="spc56" >Stati Uniti</option><option style="" value="spc83" class="spc57" >Belize</option><option style="" value="spc84" class="spc57" >Costa Rica</option><option style="" value="spc85" class="spc57" >Guatemala</option><option style="" value="spc86" class="spc57" >Messico</option><option style="" value="spc87" class="spc57" >Panama</option><option style="" value="spc88" class="spc58" >Equador</option><option style="" value="spc89" class="spc58" >Perù</option><option style="" value="spc90" class="spc59" >Hawaii</option><option style="" value="spc91" class="spc59" >Polinesia Francese</option><option style="" value="spc92" class="spc60" >Seishelles</option><option style="" value="spc93" class="spc60" >Mauritius</option><option style="" value="spc94" class="spc61" >Dubai</option><option style="" value="spc95" class="spc61" >Oman</option></select>
<input type="submit" id="XTtop_button" name="search" value="Search" class="buttonhome" onclick="this.form.sp_search_for.focus();extSearchHelper132.extractFormValues();"/>
</form>
Removing of "disable" tag probably depends to this script, loaded by the form: http://www.provafabio.netsons.org/modules/mod_sobiextsearch/js/jquery.chained.min.js
Now I'm using this script, which works for the first, but not for the second...
<script text= type='text/javascript'>
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j("#XTspSearchForm132").validate({
// other rules and options,
});
$j('.sid_list1').each(function () {
$j(this).rules('add', {
required: true,
messages: {
required: "your custom message"
}
});
});
$j('.sid_list2').each(function () {
$j(this).rules('add', {
required: true,
messages: {
required: "your custom message"
}
});
});
});
</script>
I need to find the syntax of action which activate the second list, to realize a script which works like this one jsfiddle.net/km6XE/ (sorry, can't post more of one link)
Here's the form in action: provafabio.netsons.org

Answer 1

I think the problem is in your "other rules and options" part of your example that you haven't included, as there is nothing wrong with your form or your JavaScript code
The error you describe is often encountered when you have specified a rule for a method that doesn't exist - have a look at this fiddle for an example
eg. this will give you the error you are seeing
$('#myform').validate({
rules: {
field1: {
non_existent_method: true
}
}
});

Answer 2

You do not use rules('add') within DOM ready if the input element does not yet exist.
This answer shows that when the user clicks a button one time, a new field called newfield is added to the form and then the rules are added dynamically to this new input field.
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin
rules: {
field1: {
required: true,
minlength: 5
},
field2: {
required: true,
minlength: 5
}
}
});
$('button#add').one('click', function () {
var field = '<input type="text" name="newfield" /><br />';
$('#myform').prepend(field);
$('[name="newfield"]').rules("add", {
required: true,
messages: {
required: "this new field is now required"
}
});
});
});
Demo: http://jsfiddle.net/km6XE/
You'll need to make sure your code creates a unique name for each new input or you'll break the Validate plugin.

Answer 3

Quote OP: "I need to understand: 1) how can i add rules to the first class
without using 'add' function 2) how can i add rules to a select list
which does not exist in DOM"
See the following:
"1) how can i add rules to the first class without using 'add' function"
If you want to assign those rules to many elements at a time by using their class, using rules('add') is acceptable. If you add rules by name, there are other ways. Again, since you are targeting by class, using rules('add') is acceptable here.
"2) how can i add rules to a select list which does not exist in DOM"
You can not add rules to something that does not exist yet in the DOM.
Inside whatever function is used to create the element is where you'd place your rules('add').
THIS IS JUST AN EXAMPLE:
IF you use a button to add an input element, you'd put rules('add') inside the click handler function. The same idea applies no matter how you add the new input. Since we can't see that part of your code, I'm sticking with my generic example below:
$('button#add').one('click', function () { // <-- WHATEVER FUNCTION YOU USE to add the new input
// THIS is just SAMPLE code that adds a new input element
var field = '<input type="text" name="newfield" /><br />';
$('#myform').prepend(field);
// NOW HERE, AFTER the new input is created, is where to add the rules.
$('[name="newfield"]').rules("add", {
required: true,
messages: {
required: "this new field is now required"
}
});
}); // <- end button#add click handler
Working Demo: http://jsfiddle.net/km6XE/
Essentially this is the same as my first answer.