jQuery validation on select box not working

Question

I am using jQuery validation plugin for client side validation, but my validation does not work on my select box.

HTML

<select id="select" class="required">
    <option value="-1">Choose</option>
    <option value="child">test2</option>
</select>

JavaScript

$("#formid").validate({
    select: {
        required: function(element) {
            if ($("#select").val() == '-1') {
                return false;
            } else {
                return true;
            }
        }
    }
}); 

How do I get this working?

Answer 1

A simple way to fix this problem is to give the non valid option the value of "" . Then simply call validate on your form and it will not submit when "Choose" is selected.

HTML

<form id="formid">
    <select name="select" class="required">
        <option value="">Choose</option>
        <option value="child">test2</option>
    </select>

    <input type="submit" />
</form>​

JavaScript

$("#formid").validate(); ​

Demo

Answer 2

Although this probably works with some of the aforementioned methods,if you're looking to use a custom validation function, you should use addMethod as documented here: http://docs.jquery.com/Plugins/Validation/Validator/addMethod

So you would first add the method through something like

$.validator.addMethod("requiredSelect", function(element) {
                return ( $("#select").val() !='-1' );
            }, "You must select an option.");

Then simply assign the validator with

$("#formid").validate({
  rules: {
    select: { requiredSelect : true }
  }
});

Answer 3

instead of:

$("#select").val()

try:

$("#select :selected").val()

$("#select").val() returns all the option values instead of the selected one.

Here, my assumption is that you want to check if the user has chosen the option -1 when the control report-crime is validated.

Answer 4

by default

<option value="">Choose</option>

works with

required: true

Answer 5

There is missing name attribute in your select element. In my case that was the issue since the jQuery Validatation Plugin looks for the name not id while validating.

Answer 6

For some reason no solution provided worked in my case, it boiled down to jQuery Validate calling the "optional" check on the value of the drop down, which that called the !required rule.

When the select box selected an empty value, the required showed "false" which inverted meant it was always optional when the required failed, so it never ran the required rule.

I overwrote the optional function with the below, which returned "False" on optional if it was a required item:

// Get Select to work
    $.validator.prototype.optional = function (element) {
        var val = this.elementValue(element);

        // Custom logic to get Select to show validate when value is empty
        if (element.nodeName.toLowerCase() === "select") {
            if (element.hasAttribute("data-val-required") || element.hasAttribute("required")) {
                return false;
            }
        }

        return !$.validator.methods.required.call(this, val, element) && "dependency-mismatch";
    };