I have looked and not found the answer I'm seeking and am also very new to Javascript. How would I validate that a user selects a state from my drop down? If they don't select one or choose the first disabled option, an alert should appear. My HTML and Javascript are in different files.

Here's what I've tried so far with javascript, the validation for the dropdown is at the end:

function validateForm() {
    // name validation
    var myName = document.forms["themissing"]["name1"].value;
    if (myName == "") {
        alert("Name must be filled out!");
        return false;
    }

    // age validation
    var myAge = document.forms["themissing"]["age1"].value;
    if (myAge == "") {
        alert("Age must be filled out!");
        return false;
    }

    // gender validation
    if (document.themissing.gender[0].checked == true) {
        return true;
    }
    else if (document.themissing.gender[1].checked == true) {
        return true;
    }
    else {
        alert("Gender must be selected!");
        return false;
    }

    // dropdown validation
    var mySelect = document.getElementById("states");
    if(!mySelect.value) {
        alert('You must select a State!');
        return false;
    }
    console.log("there is a value");
    return true;

}

Here's my HTML:

<select class="form-control" id="states">
              <option value="selectstate" selected disabled>--Select a State--</option>
              <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
</select>

The HTML is pretty long so I just abstracted it from the Body.

Any help in the right direction would be greatly appreciated.

I have looked and not found the answer I'm seeking and am also very new to Javascript. How would I validate that a user selects a state from my drop down? If they don't select one or choose the first disabled option, an alert should appear. My HTML and Javascript are in different files.

Here's what I've tried so far with javascript, the validation for the dropdown is at the end:

function validateForm() {
    // name validation
    var myName = document.forms["themissing"]["name1"].value;
    if (myName == "") {
        alert("Name must be filled out!");
        return false;
    }

    // age validation
    var myAge = document.forms["themissing"]["age1"].value;
    if (myAge == "") {
        alert("Age must be filled out!");
        return false;
    }

    // gender validation
    if (document.themissing.gender[0].checked == true) {
        return true;
    }
    else if (document.themissing.gender[1].checked == true) {
        return true;
    }
    else {
        alert("Gender must be selected!");
        return false;
    }

    // dropdown validation
    var mySelect = document.getElementById("states");
    if(!mySelect.value) {
        alert('You must select a State!');
        return false;
    }
    console.log("there is a value");
    return true;

}

Here's my HTML:

<select class="form-control" id="states">
              <option value="selectstate" selected disabled>--Select a State--</option>
              <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
</select>

The HTML is pretty long so I just abstracted it from the Body.

Any help in the right direction would be greatly appreciated.

• javascript

Share Improve this question Follow asked Aug 17, 2019 at 16:33 wolfbagelwolfbagel 47833 gold badges1111 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The good news is that you're really close to having a working solution!

There was only two problems with the javascript you posted above:

the first is that the default value of your mySelect element is actually "selectstate" so you should really check to see if mySelect.value === "selectstate.

Another issue is that in this section you have a condition that would shortcircuit your validation:

    // gender validation
    if (document.themissing.gender[0].checked == true) {
        return true;
    }
    else if (document.themissing.gender[1].checked == true) {
        return true;
    }
    else {
        alert("Gender must be selected!");
        return false;
    }

So if either of the gender checkboxes are selected then the whole form is considered valid even if no state has been selected!

I would change the code like this:

function validateForm() {
    // name validation
    var myName = document.forms["themissing"]["name1"].value;
    if (myName == "") {
        alert("Name must be filled out!");
        return false;
    }

    // age validation
    var myAge = document.forms["themissing"]["age1"].value;
    if (myAge == "") {
        alert("Age must be filled out!");
        return false;
    }

    // gender validation
    if (document.themissing.gender[0].checked == false && document.themissing.gender[1].checked == false) { // <-- second change here (first two ifs replaced by one check that can only fail)
        alert("Gender must be selected!");
        return false;
    }

    // dropdown validation
    var mySelect = document.getElementById("states");
    if(mySelect.value === "selectstate) { // <-- first change here
        alert('You must select a State!');
        return false;
    }
    console.log("there is a value");
    return true;

}

Wele on board! First of all, you can get yourself familiar with events in JavaScript. With it we can add so-called event listener on our <select> that will be waiting for event input to fire. Only then your function for validating select and eventually form, validateForm() will be called.

Also you use if(!mySelect.value) { which means that sth will happen if mySelect have no value what won't happen because your first option has value="selectstate". Also attribute disabled is not doing anything in this case.

You can change it f.e. in this manner:

var mySelect = document.getElementById("states");

function validateForm() {
  // dropdown validation
  if (mySelect.value === "notValid") {
    alert("You must select a State!");
    return false;
  }
  console.log("there is a value");
  return true;
}

mySelect.addEventListener("input", validateForm);

Here's a working example.