Displaying Validation Error in Span for Drop Down Menu

Question

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;
    }

Does this answer your question? [How can I implement prepend and append with regular JavaScript?](https://stackoverflow.com/questions/3391576/how-can-i-implement-prepend-and-append-with-regular-javascript) — Heretic Monkey, Mar 23 '20 at 14:17
Although this question's link was helpful, I specifically wanted to use spans. @HereticMonkey — , Mar 24 '20 at 01:29
The accepted answer on that question does not prescribe a specific element to use, nor does the accepted answer on this question. I'm puzzled as to how the duplicate can not answer your question, but the answer you've marked as accepted here can, since they use the same approach, `appendChild`. — Heretic Monkey, Mar 24 '20 at 11:33

Biplove Lamichhane · Answer 1 · 2020-03-22T03:34:17.403

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;
    }

I still do not get a span on the page after using appendChild as well. @BiploveLamichhane — , Mar 22 '20 at 03:27
I was able to get the spans but I wanted to use the code again if I have multiple drop down menus and display a different span for each drop down menu which I wasn't able to get. @BiploveLamichhane — , Mar 24 '20 at 19:30

score 0 · Accepted Answer · edited Mar 23 '20 at 14:11

0

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>

edited Mar 23 '20 at 14:11

answered Mar 22 '20 at 03:30

Adwaith R Krishna

766
2
8
19

Yes this is what I was trying to do. The only thing I'm confused about with your answer is that if the user keeps clicking the submit button, the error keeps repeating multiple times. Obviously someone wouldn't keep clicking submit to display the error many times but if they did by accident I wouldn't want to displaying the message over and over again. Is there a way to only display it once? @AdwaithRKrishna – Mar 22 '20 at 03:41
@csscoder sorry didn't think of that. Now I have added a check for the case you pointed out. – Adwaith R Krishna Mar 22 '20 at 04:16
Now the error message is only displayed once but I'm confused on how everything disappears if they do actually select male or female. If you run the code snip it and run select male or female the entire drop down menu disappears, can you please explain which part of the code is causing this? @AdwaithRKrishna – Mar 22 '20 at 12:59
@csscoder The form element has two important attributes that together control what happens when the submit button is pressed. The first is the action attribute. This attribute specifies the program that the form data will be send to. It is usually a URL, which means that the program to process the data can reside anywhere on the world-wide web. The method attribute of the form element controls how the information is sent. The value of this attribute is either "get" or "post". – Adwaith R Krishna Mar 23 '20 at 06:14
@csscoder So what happens here is that when the onSubmit action return true the form posts the data to the end-point specific in the action attribute. I have given '#' in its place. Please run the snippet inside your own browser rather than running inside StackOverflow to get a grasp of what is really happening. The form will not clear in the case of real forms – Adwaith R Krishna Mar 23 '20 at 06:19
After I commented I realized it was probably just the snip it, it worked in my own code editor, thank you for your help! – Mar 23 '20 at 13:07
I'm trying to use this answer to add validation to other things as well on my page. I want to add more drop down menu's and tried using this code again for another drop down menu. I changed the name and used another div and am getting the id for another dro down menu but the error for the new menu is not showing up. Can you please explain what I'm doing wrong? Here is the link: https://jsfiddle.net/1ed8x4bt/ @AdwaithRKrishna – Mar 24 '20 at 18:25

Displaying Validation Error in Span for Drop Down Menu

2 Answers2