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

Question

我正在尝试验证页面上的 select 菜单。如果第一个选项是 selected（没有值的那个）并单击提交按钮，那么我想在菜单旁边显示一个跨度或在菜单下显示一个跨度。跨度应该告诉用户 select 一个选项 (male/female)。我在做这两件事时遇到了麻烦。 span 在这里使用不正确吗？

关于可能重复的注意事项：我阅读了 Stack 上发布的一些与此问题类似的答案，但有些使用了 JQuery，我还没有学到。有一个使用 Javascript 的答案，我试着照着做。它使用了一个带有参数和 errorPlacement 的函数，但我在理解它时遇到了困难，想以一种更简单的方式来做。我还查看了其他问题，但我现在只列出一个。这是问题的 link： 此外，如果可能的话，我特别想使用 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

我认为您没有收到错误消息的原因是，javascript 混淆了创建的标签及其内容的放置位置。 您可能忘记为 appendChild 添加一些标签，以便 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;
    }

Answer 2

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

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

Displaying Validation Error in Span for Drop Down Menu

html

javascript

getelementbyid