Validate select box

Question

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

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_6440 · Answer

Just add a class of required to the select

user_10839 · Answer

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

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_4135165 · 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

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

user_15003705 · Answer

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';
    }


                    Semester

Validate select box

9 Answers