Validate select box

Question

I m using the jQuery plugin Validation to validate a form  I have a select list looking like this    lt select id  select  gt   lt option value    gt Choose an option lt  option gt   lt option value  option1  gt Option1 lt  option gt   lt option value  option2  gt Option2 lt  option gt   lt option value  option3  gt Option3 lt  option gt   lt  select gt    Now  I want to make sure that the user selects anything but  Choose an option   which is the default one   So that it won t validate if you choose the first option  How can this be done

User · Accepted Answer

Just add a class of required to the select   lt select id  select  class  required  gt

User · Answer

you want to make sure that the user selects anything but  Choose an option   which is the default one   So that it won t validate if you choose the first option  How can this be done   You can do this by simple adding attribute required    required  in the select tag  you can see it in below code   lt select id  select  required  required  gt   lt option value    gt Choose an option lt  option gt   lt option value  option1  gt Option1 lt  option gt   lt option value  option2  gt Option2 lt  option gt   lt option value  option3  gt Option3 lt  option gt   lt  select gt    It worked fine for me at chorme  firefox and internet explorer  Thanks

User · Answer

For starters  you can  disable  the option from being selected accidentally by users    lt option value    disabled  disabled  gt Choose an option lt  option gt    Then  inside your JavaScript event  doesn t matter whether it is jQuery or JavaScript   for your form to validate whether it is set  do   select   document getElementById  select       or in jQuery use  select   this  if  select value         value is set to a valid option  so submit form   return true    return false    Or something to that effect

User · Answer

lt script type  text JavaScript  gt    function validate      if  document form1 quali value     -1              alert   Please select qualification           return false           lt  script gt   lt form name  form1  method  post  action    onsubmit  return validate this    gt   lt select name  quali  id  quali    gt           lt option value  -1  selected  selected  gt select lt  option gt           lt option value  1  gt Graduate lt  option gt           lt option value  2  gt Post Graduate lt  option gt         lt  select gt    lt  form gt          this code works 110  tested by me after many complex jquery method validation but it is simple javascript method plz try this if u fail in drop down required validation

User · Answer

if  select              alert  Please select a selection        return false    That should work for you  It just did for me

User · Answer

lt select id  bookcategory  class  form-control  required    gt                       lt option value    disabled  disabled  gt Category lt  option gt                       lt option value  1  gt LITERATURE  amp  FICTION lt  option gt                       lt option value  2  gt NON FICTION lt  option gt                       lt option value  3  gt ACADEMIC lt  option gt               lt option value  4  gt CHILDREN  amp  TEENS lt  option gt                    lt  select gt    HTML form validation can be performed automatically by the browser  Try the above code  The rest all will be done automatically  no need to create any js functions just this dropdown and a submit button

User · Answer

I don t know how was the plugin the time the question was asked  2009   but I faced the same problem today and solved it this way    Give your select tag a name attribute  For example in this case   lt select name  myselect  gt     Instead of working with the attribute value  default  in the tag option  disable the default option as suggested by Jeremy Visser or set value      lt option disabled  disabled  gt Choose    lt  option gt       or   lt option value    gt Choose    lt  option gt      Set the plugin validation rule       YOUR FORM ID    validate       rules            myselect    required  true              or   lt select name  myselect  class  required  gt    Obs  redsquare s solution works only if you have just one select in your form  If you want his solution to work with more than one select add a name attribute to your select   Hope it helps

User · Answer

Perhaps there is a shorter way but this works for me    lt script language  JavaScript  type  text javascript  gt      function validateThisFrom thisForm            if  thisForm FIELDNAME value                      alert  Please make a selection                thisForm FIELDNAME focus                return false                    if  thisForm FIELDNAME2 value                      alert  Please make a selection                thisForm FIELDNAME2 focus                return false                   lt  script gt   lt form onSubmit  return validateThisFrom  this    gt       lt select name  FIELDNAME  class  form-control  gt           lt option value    gt - select - lt  option gt           lt option value  value 1  gt Visible info of Value 1 lt  option gt           lt option value  value 2  gt Visible info of Value 2 lt  option gt       lt  select gt       lt select name  FIELDNAME2  class  form-control  gt           lt option value    gt - select - lt  option gt           lt option value  value 1  gt Visible info of Value 1 lt  option gt           lt option value  value 2  gt Visible info of Value 2 lt  option gt       lt  select gt   lt  form gt

[javascript] Validate select box

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to validation

Examples related to forms