66

I'm using the jQuery plugin Validation to validate a form. I have a select list looking like this:

<select id="select">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

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?

ponjoh
  • 927
  • 3
  • 9
  • 9
  • I actually came to this question because of a mistyping other place in my jquery... I had no issues making it work this exact way you suggested. Maybe jQuery have implemented this feature since 2009. – cregox Mar 11 '11 at 21:21
  • check out my answer here http://stackoverflow.com/a/40909817/4251431 – Basheer AL-MOMANI Jan 18 '17 at 07:32

9 Answers9

78

Just add a class of required to the select

<select id="select" class="required">
redsquare
  • 78,161
  • 20
  • 151
  • 159
23

For starters, you can "disable" the option from being selected accidentally by users:

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

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.

Jeremy Visser
  • 6,237
  • 1
  • 25
  • 30
7

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:

  1. Give your select tag a name attribute. For example in this case

    <select name="myselect">

  2. Instead of working with the attribute value="default" in the tag option, disable the default option as suggested by Jeremy Visser or set value=""

    <option disabled="disabled">Choose...</option>

    or

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

  3. Set the plugin validation rule

    $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

    or

    <select name="myselect" class="required">

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! :)

4
<select id='bookcategory' class="form-control" required="">
                    <option value="" disabled="disabled">Category</option>
                    <option value="1">LITERATURE & FICTION</option>
                    <option value="2">NON FICTION</option>
                    <option value="3">ACADEMIC</option>
            <option value="4">CHILDREN & TEENS</option>

                </select>

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.

Gurmeet Singh
  • 774
  • 8
  • 21
  • 1
    You may wish to add the selected attribute to the first option so that the browser starts off with that label to make it more visible to the user. – Jonathan Geisler Jun 29 '16 at 16:30
2

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

<select id="select" required="required">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

It worked fine for me at chorme, firefox and internet explorer. Thanks

1

const semesterValue = semester.value.trim();

   if(semesterValue == ""){
      setErrorForDropDown(semester,"Please select your semester");
      }else{
      setSuccessForDropDown(semester);
    }
    
function setErrorForDropDown(input,message){
      const formControl = input.parentElement;
      const small = formControl.querySelector('small');
      small.innerText = message;
      formControl.className = "drop-down error";   
    }
function setSuccessForDropDown(input){
      const formControl = input.parentElement;
      formControl.className = 'drop-down success';
    }    
<div class = "drop-down">
                    <label for="semester">Semester</label>
                    <select name="semester" class= "select" id="select">
                        <option value = "">Select</option>
                        <option value="1st">1st</option>
                        <option value="2nd">2nd</option>
                        <option value="3rd">3rd</option>
                        <option value="4th">4th</option>
                        <option value="5th">5th</option>
                        <option value="6th">6th</option>
                        <option value="7th">7th</option>
                        <option value="8th">8th</option>
                    </select>
                    <small></small>
                </div>
  • Welcome to Stack Overflow. Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). – Sfili_81 Jun 17 '21 at 12:24
0
if (select == "") {
    alert("Please select a selection");
    return false;

That should work for you. It just did for me.

M. Ray
  • 1
  • 1
0

Perhaps there is a shorter way but this works for me.

<script language='JavaScript' type='text/javascript'>
    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;
        }
    }
</script>
<form onSubmit="return validateThisFrom (this);">
    <select name="FIELDNAME" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
    <select name="FIELDNAME2" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
</form>
Marina
  • 101
  • 1
  • 7
-3
   <script type="text/JavaScript">  
function validate() 
{
if( document.form1.quali.value == "-1" )
   {
     alert( "Please select qualification!" );
     return false;
   }
}

</script>
<form name="form1" method="post" action="" onsubmit="return validate(this);">
<select name="quali" id="quali" ">
        <option value="-1" selected="selected">select</option>
        <option value="1">Graduate</option>
        <option value="2">Post Graduate</option>
      </select> 
</form>





// 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//