jQuery Validate Plugin: how to validate a dropdown

Question

I'm trying to use the jQuery Validate plugin to validate a dropdown. It validates the rest of my form correctly. But it doesn't work on the dropdown.

Here is my jQuery:

$('#campaignForm').validate({
    rules: {
         campaign_name: {
             required: true
         },
         html_url: {
             required: {
                 depends: function(element) {
                     return $('#html_url').val() == 'none';
                 }
              }
         }
    },
    messages: {
        campaign_name: 'Please enter a campaign name',
        html_url: 'Please select a template'
    }
});

Here is my HTML:

<select name="html_url" id="html_url">
<option value="none">Select One...</option>
...
</select>

What am I doing wrong? Are my variable names colliding somehow. The rule for campaign name works fine.

Answer 1

If you just want to make a select element required, you would not use depends: because it does not "depend" on another element. In your usage, the depends property is simply toggling the required rule. The problem here is not the required rule... it does not need to be toggled. The problem is that the required rule will not work when all options already contain a value, since required will always be satisfied.

Simply use value="" for the default option, and then set your rules just like any other element.

<option value="">Select One...</option>

jsFiddle DEMO

HTML:

<form id="campaignForm">   
    <select name="html_url" id="html_url">  
        <option value="">Select One...</option>
        <option value="one">ONE</option>
        <option value="two">TWO</option>
    </select>
    <input type="submit" />
</form>​

jQuery:

$(document).ready(function() {
    $('#campaignForm').validate({
        rules: {
            html_url: {
                required: true
            }
        },
        messages: {
            html_url: {
                required: 'Please select a template'
            }
        }
    });
});​

Answer 2

If for some reason you can't set the value to blank like Spark said, you can just add your own JQuery validation function instead of the default required preset.

$.validator.addMethod("aFunction",
    function(value, element) {
        if (value == "none")
            return false;
        else
            return true;
    },
    "Please select a value");

$('#campaignForm').validate({
    rules: {
         campaign_name: {
             required: true
         },
         html_url: {
             aFunction: true
         }
    },
    messages: {
        campaign_name: 'Please enter a campaign name',
        html_url: 'Please select a template'
    }
});