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.

I've tried both and I don't get a message for either. Could it be validating correctly and the message just isn't showing? If so, how do I get it to show? — sehummel, Nov 26 '12 at 23:07
This may be part of the problem, actually: http://stackoverflow.com/a/9890284/139010 — Matt Ball, Nov 26 '12 at 23:08
Not entirely sure what you're asking because your usage of the `depends:` option is somewhat misleading. If you just want to make a `select` `required`, you do not use `depends:` because it does not "depend" on another element... see my answer. — Sparky, Nov 27 '12 at 00:33
Your `depends` property is only toggling the `required` rule. However, the `required` rule will not work when all options already contain a `value`, since `required` will always be satisfied. — Sparky, Mar 17 '15 at 14:08

Sparky · Answer 1 · 2015-03-17T14:06:37.500

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'
            }
        }
    });
});

why to use `value=""` ? why `depend: "required"` is not work? — Prashant Tapase, Mar 17 '15 at 13:59
@Prashant, because if the `value` is not set to blank, then how would the plugin know that no selection has been made? `value=""` is the selection that tells the plugin ***no selection*** has yet been made. The `depends` property is only toggling the `required` rule. However, the `required` rule will not work when all options already contain a `value`, since `required` will always be satisfied. — Sparky, Mar 17 '15 at 14:04

score 5 · Answer 2 · answered Nov 08 '14 at 08:21

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'
    }
});

score -1 · Answer 3 · edited Aug 27 '19 at 13:17

-1

$('#campaignForm').validate({
    rules: {
        html_url: {
            min: 1,
        }
    },
    messages: {
        html_url: 'Please select a template',
    }
});

edited Aug 27 '19 at 13:17

Pingolin

3,161
6
25
40

answered Aug 27 '19 at 12:05

Rahmat Afridi

1
2

jQuery Validate Plugin: how to validate a dropdown

3 Answers3

Linked