在 Span 中顯示下拉菜單的驗證錯誤

Question

我正在嘗試驗證頁面上的選擇菜單。 如果選擇了第一個選項（沒有值的選項）並單擊提交按鈕，那么我想要么在菜單旁邊顯示一個跨度，要么在菜單下顯示一個跨度。 跨度應該告訴用戶選擇一個選項（男性/女性）。 我在做這兩件事時都遇到了麻煩。 在這里使用跨度不是正確的嗎？

關於可能重復的注意事項：我閱讀了一些在 Stack 上發布的與此問題類似的答案，但有些使用了我尚未學習的 JQuery。 有一個答案使用了我試圖遵循的 Javascript。 它使用了一個帶有參數和 errorPlacement 的函數，但我在理解它時遇到了麻煩，並希望以更簡單的方式來實現。 我也看了其他問題，但我現在列出一個。 這是問題的鏈接： 驗證時在跨度元素中顯示錯誤消息的問題另外，如果可能的話，我特別想使用跨度標簽，然后添加和附加。

這是我的代碼：

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

我想這就是你想要的。 總是有一個 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>