JQuery Validate Dropdown list

Question

I'm using the validation plugin from here. I'm trying force the user to select an option in the drop down list so here's my html for the list:

Select the best option<br/>
<select name="dd1" id="dd1">
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select> <br/><br/>​

And here's the the jquery validation stuff:

$("#everything").validate({
    onsubmit: true,
    rules: {
     dd1: {
      required: {
        depends: function(element) {
            return $("#dd1").val() == "none";
        }
      }
    },
    messages: {
     dd1: {
      required: "Please select an option from the list, if none are appropriate please select 'Other'",
     },
    }
});

I don't see any problems but even when the i select none from the drop down list and click submit, it won't validate it and so doesn't show any messages. Can anyone tell me what i'm doing wrong?

Answer 1

The documentation for required() states:

To force a user to select an option from a select box, provide an empty options like <option value="">Choose...</option>

By having value="none" in your <option> tag, you are preventing the validation call from ever being made. You can also remove your custom validation rule, simplifying your code. Here's a jsFiddle showing it in action:

http://jsfiddle.net/Kn3v5/

If you can't change the value attribute to the empty string, I don't know what to tell you...I couldn't find any way to get it to validate otherwise.

Answer 2

As we know jQuery validate plugin invalidates Select field when it has blank value. Why don't we set its value to blank when required.

Yes, you can validate select field with some predefined value.

$("#everything").validate({
    rules: {
        select_field:{
            required: {
                depends: function(element){
                    if('none' == $('#select_field').val()){
                        //Set predefined value to blank.
                        $('#select_field').val('');
                    }
                    return true;
                }
            }
        }
    }
});

We can set blank value for select field but in some case we can't. For Ex: using a function that generates Dropdown field for you and you don't have control over it.

I hope it helps as it helps me.