CODEWITHSUNDEEP
javascriptformsvalidationselect
Trent H
Trent H

Reputation: 5

JavaScript Validate Select List

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.

Upvotes: 0

Views: 8904

Answers (3)

KooiInc
KooiInc

Reputation: 122888

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>

Upvotes: 0

TheIronDeveloper
TheIronDeveloper

Reputation: 3624

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)

Upvotes: 0

Barmar
Barmar

Reputation: 780663

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

Upvotes: 1

Related Questions