在下拉菜单中显示验证错误

Question

我正在尝试验证页面上的选择菜单。如果选择第一个选项（没有值的选项）并单击提交按钮，那么我想在菜单旁边显示一个跨度，或者在菜单下显示该跨度。跨度应告诉用户选择一个选项（男性/女性）。我在做任何一件事情时都遇到麻烦。跨度在这里使用不正确吗？

关于可能的重复的注释：我阅读了一些类似于此问题的在Stack上发布的答案，但是一些我尚未学习的使用过JQuery。有一个答案使用了我尝试遵循的Javascript。它使用了带有参数和errorPlacement的函数，但是我在理解它时遇到了麻烦，并希望以一种更简单的方式来实现。我也看了其他问题，但我现在列出一个。这是问题的链接：Problem with display error message in span element when validation此外，如果可能的话，我也想特别使用span标签，然后加上并附加。

这是我的代码：

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

Answer 1

我认为这就是您想要的。始终使用error-msg div来为错误提供样式。

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>

Answer 2

[我认为您为什么没有收到错误消息是因为，javascript混淆了将创建的标记及其内容放在何处。 您可能忘了给孩子添加一些标签，以便javascript知道将创建的标签放在何处

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>

仅在下面，脚本：-

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