Displaying Validation Error in Span for Drop Down Menu

Admin 1
Viewed 1556

I'm trying to validate a select menu I have on my page. If the first option is selected(the one with no value)and clicks the submit button, then I want to either display a span next to the menu or display the span under the menu. The span should tell the user to select an option (male/female). I'm having trouble doing either of these things. Is span not the correct thing to use here?

Note on possible duplicate: I read some of the answers posted on Stack similar to this question but some used JQuery which I have not learned yet. There was one answer that used Javascript which I tried to follow. It used a function with parameters and errorPlacement but I was having trouble understanding it and wanted to do it in a simpler way. There were other questions I looked as well, but I'm listing one for now. Here is the link to the question: Problem with display error message in span element when validation Also I'd specially like to use span tags if possible then prepend & append.

Here is my code:

HTML

<form onsubmit="return Validate();">
<div id="div1">
          <select id="gender">
            <option value="">Select gender:</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
</div>
<input type = "submit" value="submit"/>
</form>

JAVASCRIPT

function Validate() {
var gender = document.getElementById("gender");
 if (gender.value == "") {

            var gendererror = document.createElement("span");
            gendererror.innerHTML = "please select a gender";
            return false;
        }
        return true;
    }
getelementbyid html javascript
2 Answers

I think why you didn't get error message is because, javascript is confuse where to put the created tag and its content. You might have forgot to appendChild with some tag, so that javascript knows where to put created tag

Html:-

    <form onsubmit="return Validate();">
        <div id="div1">
            <select id="gender">
                <option value="">Select gender:</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
            </select>
        </div>
        <input type = "submit" value="submit"/>
    </form>

Just below, Script:-

    function Validate() {
        var gender = document.getElementById("gender");
        if (gender.value == "") {
            var relationshiperror = document.createElement("span");
            document.body.appendChild(relationshiperror);        // You can add to any new div for example, also after submit button
            relationshiperror.innerHTML = "Please select the type of relationship";
            return false;
        }
        return true;
    }
user_108605960

I think this is what you want. Always have a error-msg div to give styles to your errors.

function Validate() {
var gender = document.getElementById("gender");
 if (gender.value == "") {
            if(!document.getElementById("error-msg").childNodes.length){
                var gendererror = document.createElement("span");
                gendererror.innerHTML = "please select a gender";
                document.getElementById("error-msg").appendChild(gendererror); 
            }
            return false;
        }else{
            return true
        }
}
<form onsubmit="return Validate();" action="#">
  <div id="error-msg"></div>
<div id="div1">
          <select id="gender">
            <option value="">Select gender:</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
</div>
<input type = "submit" value="submit"/>
</form>

<script type="text/javascript" src="./jsfile.js"></script>

user_89039200
Related