20

I am using jQuery Validation Plugin for form validation and I am not able to validate list/select box

<select id="select">
 <option value="-1">Choose an option</option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
</select>

Now, I want to make sure that the user selects anything but "Choose an option" (which is the default one, and has value as -1). So that it won't validate if you choose the first option. How can this be done?

I-M-JM
  • 15,732
  • 26
  • 77
  • 103
  • possible duplicate of [jQuery Validate Required Select](http://stackoverflow.com/questions/2901125/jquery-validate-required-select) – Fabio Antunes Apr 15 '14 at 10:46

6 Answers6

19

Put <option value="">Choose an option</option> as blank rather than -1

using jquery validation

rules: {                      
                select: "required"
}
Deenadhayalan Manoharan
  • 5,436
  • 14
  • 30
  • 50
Vicky
  • 9,515
  • 16
  • 71
  • 88
11

You can use Jquery Validator custom rule.

A similar example is discussed here. The code below is from the example:

// add the rule here
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg != value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "-1" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });
Community
  • 1
  • 1
Hoàng Long
  • 10,746
  • 20
  • 75
  • 124
  • @ down voters: why? I'm aware that "select: required" works, but this answer is also valid. It also allow you more room to customize your error message. – Hoàng Long Oct 08 '16 at 01:45
4

Add this in your rule

select:{
  required: function(element) {
    if( $("#select").val() =='-1'){
      return false;
    } else {
      return true;
    }
  }
}
Dan Atkinson
  • 11,391
  • 14
  • 81
  • 114
Vicky
  • 9,515
  • 16
  • 71
  • 88
1

Or use the element value:

required: function(elm) {
    if(elm.options[elm.options.selectedIndex].value != "-1") {
        return true;
    } else {
        return false;
    }
}
Robin
  • 27
  • 1
  • 5
1

Why don't you use the value of the condition?

required: function(elm) {
    return (elm.options[elm.options.selectedIndex].value != "-1");
}

This does the same as the solution from Robin, but is much shorter.

Alexander Behling
  • 11
  • 1
0

How can we validate for jquery ui select dropdown

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
<script>
$(".intselect").selectmenu();
$().ready(function() {


jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#validateregister" ).validate({
  rules: {
   firstname: {
      required: true
    },
  email: {
      required: true,
   email: true
    },
    year: {
      required: true
    }
  }
  
});
$('#validateregister').change(function() {
        if ($("#validateregister").valid()) {
            $(".go").removeAttr("disabled");
        }
  else{
    $(".go").attr("disabled","disabled");
  }
    });
});
</script>
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<form id="validateregister" style="width: 300px;">
  <div> <br />
    <input type="text" name="firstname" class="form-control" id="firstname" />
  </div>
  <div> <br />
    <input type="text" name="email" class="form-control" id="email" />
  </div>
  <div> <br />
    <select class="form-control intselect" name="year" id="year">
      <option value="">Select year</option>
      <option value="2014">2014</option>
      <option value="2015">2015</option>
      <option value="2016">2015</option>
    </select>
  </div>
  <div> <br />
    <input type="submit" class="btn btn-default go" value="submit" disabled>
  </div>
</form>
Darren
  • 41
  • 6