CODEWITHSUNDEEP
jqueryhtmljquery-validate
sehummel
sehummel

Reputation: 5568

jQuery Validate Plugin: how to validate a dropdown

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.

Upvotes: 4

Views: 29008

Answers (3)

Rahmat Afridi
Rahmat Afridi

Reputation: 1

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

Upvotes: -1

Sparky
Sparky

Reputation: 98738

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

Upvotes: 10

MTran
MTran

Reputation: 1809

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

Upvotes: 5

Related Questions