Adding validation to an HTML select box

Question

I want to make one simple validation check on my HTML form. I'd like it so that if the user chooses the 18 - 24, an error appears next to the drop down select: 'You must be 25+'.

<select class="element select medium" id="element_3" name="element_3"> 
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>

I've tried adding both a class and ID to value 1. Then I tried something like:

function hidestuff(page){
   document.getElementById(error).style.visibility="hidden";
}

function showstuff(error){
   document.getElementById(error).style.visibility="visible";
}

Attempting to toggle show and hide with JavaScript. Hoping something like if on page ID hide this message, when error div toggled display. But this didn't work. I did add the corresponding CSS too. Any pointers on how to write this correctly?

Simon Adcock · Accepted Answer · 2013-06-01 22:59:12Z

4

Something like this can be achieved with a bit of jQuery:

Here's a JSFiddle

jQuery:

$(document).ready(function() {

    $('#errorMsg').hide();  //ensure the error message is hidden

    $('#element_3').on('change',function() {

        // any option that has the class "error" will cause the error msg to be 
        // displayed (just in case you feel like adding a 0-17 option later)
        // To target an element by ID, use $(this).find(":selected").attr('id') == 'error'

        if ($(this).find(":selected").hasClass('error')) {
           $('#errorMsg').show();   
        } else {
            $('#errorMsg').hide();   
        }
    });
});

and a bit of HTML:

<select class="element select medium" id="element_3" name="element_3"> 
    <option value="" selected="selected"></option>
    <option value="1" class="error" id="error">18 - 24</option>
    <option value="2" >25 - 34</option>
    <option value="3" >35 - 44</option>
    <option value="4" >45 +</option>
</select>
<div id="errorMsg">You must be over 25</div>

and why not style it up with some CSS:

#errorMsg {
    display: inline-block;    
    background-color: #fdd;
    font: 12pt arial;
    color: #f00;

    padding: 2px 5px 2px 5px;
    border: 1px solid #f00;
    border-radius: 5px;
    width: 200px;
}

edited Jun 1, 2013 at 22:59

answered Jun 1, 2013 at 22:07

Simon Adcock

3,5603 gold badges28 silver badges42 bronze badges

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

1 Comment

Lieutenant Dan Over a year ago

Excellent help Simon, Thank a lot, Mate!

MaVRoSCy · Accepted Answer · 2013-06-01 22:09:37Z

I think what you must be doing is something like this

<select id="myselect" onchange="check();">
    <option value="0">Select option</option>
    <option value="1">op1</option>
    <option value="2">op3</option>
</select>
<div id="error" style="display:none;">Error mesage</div>
<div id="page" style="width:100px;height:100px;border:1px solid black;display:none;">my page</div>
<script>
    function check() {
        switch (parseInt($('#myselect').val())) {
            case 0:
                $('#error').show();
                $('#page').hide();
                break;
            case 1:
                $('#error').show();
                $('#page').hide();
                break;
            case 2:
                $('#error').hide();
                $('#page').show();
                break;

        }
    }
</script>

http://jsfiddle.net/SS3gc/4/

Collectives™ on Stack Overflow

Adding validation to an HTML select box

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related