JavaScript Validate Select List

Question

I've spent days researching this (including looking at this site) and I don't understand how to do this.

I'm trying to get the JavaScript to validate that something is selected other than the default blank selection.

Every time the code gets to the select list it pops up with the window alert, but does not check if anything has been selected or not. Even if I have selected something the alert message pops up, and then continues the code so other error alerts pop up from fields not being filled out.

I would like for it to know if something is selected. If it is then no error message for it. If there is nothing selected then I would like only this alert message to appear.

Here is the Javascript function that has to do with this list (in the header)

function selectB() {
    x = 0;

    if (document.getElementById("mSQ").checked) {
        x++;
    }

    if (document.getElementById("pSQ").checked) {
        x++;
    }

    if (document.getElementById("cSQ").checked) {
        x++;
    }

    if (x == 0) {
        window.alert('You must select a Security Question');
        mSQ.focus();
        return false;
    }
}

Here is the HTML

    <p>Please Select a Security Question from the Drop Down List.<br />
    <select name = "Security Question">
        <option value = "d" id = "default" ></option>
        <option value = "m" id = "mSQ" >What is your Mother's maiden name?</option>
        <option value = "p" id = "pSQ" >What is the name of your pet?</option>
        <option value = "c" id = "cSQ" >What is your favorite color?</option>
    </select></p>

Please help, I've been stuck on this for so long.

Barmar · Accepted Answer · 2015-01-01 00:30:55Z

1

.checked is for checkboxes and radio buttons. It's not used for select options. You use .value to get the value of the selected option.

Use:

var sec_question = document.getElementByName('Security Question')[0];
if (sec_question.value == 'd') {
    window.alert('You must select a Security Question');
    sec_question.focus();
    return false;
}

You can also use of the HTML5 required attribute, so the browser will perform the check automatically. To use this, the default option should have an empty value.

<p>Please Select a Security Question from the Drop Down List.<br />
<select name = "Security Question" required>
    <option value = "" id = "default" ></option>
    <option value = "m" id = "mSQ" >What is your Mother's maiden name?</option>
    <option value = "p" id = "pSQ" >What is the name of your pet?</option>
    <option value = "c" id = "cSQ" >What is your favorite color?</option>
</select></p>

answered Jan 1, 2015 at 0:30

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trent H Over a year ago

I appreciate your help. Although I went with the code below, it is very helpful to me that you explained the .value for select and .checked is only for radio or check boxes. As those are the next fields I am tackling, your post will still be very helpful to me.

TheIronDeveloper · Accepted Answer · 2015-01-01 00:36:49Z

0

What you actually are looking for is to see if the select has a value.

Here is a revised edit of your code.

<p>Please Select a Security Question from the Drop Down List.<br />
    <select name = "Security Question" id="securityQuestion">
        <option></option>
        <option value="m">What is your Mother's maiden name?</option>
        <option value="p">What is the name of your pet?</option>
        <option value="c">What is your favorite color?</option>
    </select>
    <input type="button" value="Click to Check" onClick="checkDropdown(1)" />
</p>

<script>
    function checkDropdown () {
    var securityQuestionElement = document.getElementById('securityQuestion');
    if(!securityQuestionElement.value) {  
        window.alert('You must select a Security Question');  
        securityQuestionElement.value = 'm'
        return false;  
    }
}
</script>

Key Differences

I am checking the select's value, not the option's "checked" status
I am selectingbyId, the browser indexes Ids early on (not sure about by name)
I am checking for the absence of a value, not if the value equals one of 3 cases. (cleaner/easier to read)

answered Jan 1, 2015 at 0:36

TheIronDeveloper

3,6241 gold badge22 silver badges17 bronze badges

1 Comment

Trent H Over a year ago

Thank you SOOO much! This code does work and it is more efficient than my initial idea of x.

KooiInc · Accepted Answer · 2015-01-01 01:03:51Z

0

Add an eventlistener for the change event on the select element. Let that handler simply check the selectedIndex of the select element (> 0 => something got selected). Do the same for the submit event for the form where the select element resides.

// assign handlers
document.querySelector('#sq').addEventListener('change', check);
document.querySelector('#testform').addEventListener('submit', check);

function check(e) {
  var selector = document.querySelector('#sq');
  Helpers.logClear();
  Helpers.log2Screen('<b>', 
                     selector.selectedIndex > 0 
                       ? 'Selection ok' 
                       : 'Please <i>do</i> select an option', 
                     '</b> (from ', 
                     /form/i.test(this.nodeName) ? 'submit' : 'change', 
                     ')');
  return selector.selectedIndex > 0;
}

function submit() {
  Helpers.log2Screen('we are ok');
}

<script src="http://kooiinc.github.io/JSHelpers/Helpers-min.js"></script>
<form id="testform">
  Please Select a Security Question from the Drop Down List.<br />
  <select id="sq" name = "Security_Question">
    <option value = "d"> </option>
    <option value = "m">What is your Mother's maiden name?</option>
    <option value = "p">What is the name of your pet?</option>
    <option value = "c">What is your favorite color?</option>
  </select>
  <input type="submit" value="submit" />
</form>

edited Jan 1, 2015 at 1:03

answered Jan 1, 2015 at 0:29

KooiInc

124k32 gold badges145 silver badges181 bronze badges

2 Comments

Barmar Over a year ago

This will only run when the user modifies the selection. If the user never goes to the menu, he'll still be able to submit the form.

Trent H Over a year ago

Interesting, I have never used the "helpers" before. However, I am trying to keep things coded in as basic of JavaScript as I can (as in not using outside links to call JS from). I appreciate you taking the time to answer my question.

Collectives™ on Stack Overflow

JavaScript Validate Select List

3 Answers 3

1 Comment

Key Differences

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Key Differences

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related