javascript - 在跨度下拉菜单中显示验证错误

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

我想这就是你想要的。始终有一个错误消息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>