JQuery Validate Dropdown list

Question

I m using the validation plugin from here  I m trying force the user to select an option in the drop down list so here s my html for the list   Select the best option lt br  gt   lt select name  dd1  id  dd1  gt   lt option value  none  gt None lt  option gt   lt option value  o1  gt option 1 lt  option gt   lt option value  o2  gt option 2 lt  option gt   lt option value  o3  gt option 3 lt  option gt   lt  select gt   lt br  gt  lt br  gt     And here s the the jquery validation stuff       everything   validate       onsubmit  true      rules         dd1          required            depends  function element                return     dd1   val       none                                messages         dd1          required   Please select an option from the list  if none are appropriate please select  Other                        I don t see any problems but even when the i select none from the drop down list and click submit  it won t validate it and so doesn t show any messages  Can anyone tell me what i m doing wrong

User · Answer

As we know jQuery validate plugin invalidates Select field when it has blank value. Why don't we set its value to blank when required.

Yes, you can validate select field with some predefined value.

$("#everything").validate({
    rules: {
        select_field:{
            required: {
                depends: function(element){
                    if('none' == $('#select_field').val()){
                        //Set predefined value to blank.
                        $('#select_field').val('');
                    }
                    return true;
                }
            }
        }
    }
});

We can set blank value for select field but in some case we can't. For Ex: using a function that generates Dropdown field for you and you don't have control over it.

I hope it helps as it helps me.

User · Answer

The documentation for required   states      To force a user to select an option from a select box  provide an empty options like  lt option value    gt Choose    lt  option gt    By having value  none  in your  lt option gt  tag  you are preventing the validation call from ever being made   You can also remove your custom validation rule  simplifying your code   Here s a jsFiddle showing it in action   http   jsfiddle net Kn3v5   If you can t change the value attribute to the empty string  I don t know what to tell you   I couldn t find any way to get it to validate otherwise

User · Answer

document  ready function        HoursEntry   change function    var HoursEntry      HoursEntry option selected  val    if HoursEntry              HoursEntry   html  Please select    return false

User · Answer

Easiest way to get it done is by adding required into your select   Select the best option  lt br  gt    lt select name  dd1  id  dd1  required gt   lt option value  none  gt None lt  option gt   lt option value  o1  gt option 1 lt  option gt   lt option value  o2  gt option 2 lt  option gt   lt option value  o3  gt option 3 lt  option gt   lt  select gt     lt br  gt  lt br  gt

User · Answer

lt div id  msg  gt  lt  div gt   lt  -- put above tag on body to see selected value or error -- gt   lt script gt        function                HoursEntry   change function                var HoursEntry       HoursEntry option selected   val                console log HoursEntry               if HoursEntry                                          msg   html  Please select at least One option                    return false                            else                                   msg   html  selected val is    HoursEntry                                      lt  script gt

User · Answer

I have modified your code a little  Here s a working version  for me         lt select name  dd1  id  dd1  gt          lt option value  none  gt None lt  option gt          lt option value  o1  gt option 1 lt  option gt          lt option value  o2  gt option 2 lt  option gt          lt option value  o3  gt option 3 lt  option gt       lt  select gt         lt div style  color red   id  msg id  gt  lt  div gt    lt script gt          everything   submit function e            var department       msg id            var msg    Please select Department               if      dd1   val                            department append msg                   e preventDefault                    return false                              lt  script gt

User · Answer

This was my solution   I added required to the select tag                    lt div class  col-lg-10  gt                   lt select class  form-control  name  HoursEntry  id  HoursEntry  required gt                       lt option value    gt Select      lt  option gt                       lt option value  0 25  gt 0 25 lt  option gt                       lt option value  0 5  gt 0 50 lt  option gt                       lt option value  1  gt 1 00 lt  option gt                       lt option value  1 25  gt 1 25 lt  option gt                       lt option value  1 5  gt 1 50 lt  option gt                       lt option value  2  gt 2 00 lt  option gt                       lt option value  2 25  gt 2 25 lt  option gt                       lt option value  2 5  gt 2 50 lt  option gt                       lt option value  3  gt 3 00 lt  option gt                       lt option value  3 25  gt 3 25 lt  option gt                       lt option value  3 5  gt 3 50 lt  option gt                       lt option value  4  gt 4 00 lt  option gt                       lt option value  4 25  gt 4 25 lt  option gt                       lt option value  4 5  gt 4 50 lt  option gt                       lt option value  5  gt 5 00 lt  option gt                       lt option value  5 25  gt 5 25 lt  option gt                       lt option value  5 5  gt 5 50 lt  option gt                       lt option value  6  gt 6 00 lt  option gt                       lt option value  6 25  gt 6 25 lt  option gt                       lt option value  6 5  gt 6 50 lt  option gt                       lt option value  7  gt 7 00 lt  option gt                       lt option value  7 25  gt 7 25 lt  option gt                       lt option value  7 5  gt 7 50 lt  option gt                       lt option value  8  gt 8 00 lt  option gt                   lt  select gt

[jquery] JQuery Validate Dropdown list

Examples related to jquery

Examples related to html

Examples related to validation

Examples related to drop-down-menu

Examples related to jquery-validate