CODEWITHSUNDEEP
jqueryjquery-validate
ntan
ntan

Reputation: 2205

validate multiple select boxes selecting only one

i have multiple select boxes that the user has to select at least one

here is the code

    <select name="c_hotels[hotels][2][single_room]" id="c_hotels_2_single_room" class="c_hotels_select_room" style="width: 70px;" onchange="calculate_hotels_prices();">
    <select name="c_hotels[hotels][2][double_room]" id="c_hotels_2_double_room" class="c_hotels_select_room" style="width: 70px;" onchange="calculate_hotels_prices();">


    <select name="c_hotels[hotels][3][single_room]" id="c_hotels_3_single_room" class="c_hotels_select_room" style="width: 70px;" onchange="calculate_hotels_prices();">
    <select name="c_hotels[hotels][3][double_room]" id="c_hotels_3_double_room" class="c_hotels_select_room" style="width: 70px;" onchange="calculate_hotels_prices();">

For each hotel user can select single or double room

I want to validate so the user must select at least one of the checkboxes

i have create a method

$.validator.addMethod("sel`enter code here`ect_hotel", function(value) {
    var result=false;


    $( ".c_hotels_select_room" ).each(function(){
        var id=$(this).attr("id");                      
        var value=$("#"+id+" option:selected").val();
        if(value)
        {
           var result=true;
        }
    })

    return result;
},"message here);

and add dynamically the rule

$(".c_hotels_select_room").rules("add", { select_hotel:true});

The rule is working but the problem is that it places the message next to the first select box

I have add to the html 

<label style="display:none" for="c_hotels_select_room" class="error">This field is required.</label>

so display this message in the place i want but its not working and a assume that its not mach the field name with the label for.

Can anyone help me place the message (i am trying to avoid use errorPlacement)

Upvotes: 0

Views: 1421

Answers (2)

him
him

Reputation: 3575

 var n= 0;
    jQuery("select").each(function() {
         n = n+ this.value;              
    });
    if (n < 1) { //obviously do all the checking
      alert("Please select any value");
      return false;
    }

Upvotes: 0

Sparky
Sparky

Reputation: 98718

You have not explained where you want to place the error messages, but the following code is flawed...

$(".c_hotels_select_room").rules("add", { select_hotel:true});

As per how the jQuery Validation plugin works, your line of code above will only assign the .rule() method to the first matched element in your jQuery selector.

If you want to assign the .rule() method to all elements matched by your selector, you must wrap it inside of a jQuery .each()...

$(".c_hotels_select_room").each(function() {
    $(this).rules("add", { select_hotel:true});
});

EDIT:

Documentation for the .rules() method: http://jqueryvalidation.org/rules/

for .rules():

"... Returns the validations rules for the FIRST selected element."

for .rules('add'):

"... Adds the specified rules and returns all rules for the FIRST matched element."

for .rules('remove'):

"... Removes the specified rules and returns all rules for the FIRST matched element."

Upvotes: 1

Related Questions