jquery Validate: Let the user choose only one select box

Question

I have to select boxes side by side in a form.

<select id="requestID">
...
</select>

OR

<select id="requestor">
...
</select>

I am using jquery and the jquery validate plugin. How can I make sure that the user selects value from only one of these select boxes?

I have tried the depends option, but that only gives you the ability to make at least one of the two 'selects' required.

I want to let the user choose atleast and only one of the select's values, user should not avoid both selects and should not choose both selects.

Any ideas please?

Right now this is where I stand,

rules : {
            requestID: {
                required: {
                    depends: function(element){
                        return !$("#requestor").val().length;
                    }
                }
            },
            requestor: {
                required: {
                    depends: function(element){
                        return !$("#requestID").val().length; 
                    }
                }
            }
}

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

You can write a custom rule:
jQuery Validate Plugin - How to create a simple custom rule?

But I wouldn't use a validation here. IMHO it's better to have it work like a radio button - you just can't check more then one. So, I'd write some code that whenever one value is selected, the other list box is automatically being unselected.

edited May 23 '17 at 12:03

Community

1
1

answered Jan 15 '12 at 08:03

A.B.Cade

16,735
1
37
53

thank you.. I ended up writing an event handler on change for the two selects as you suggested – redDevil Jan 16 '12 at 18:52

jquery Validate: Let the user choose only one select box

1 Answers1