我想在 div 元素上附加錯誤消息

Question

我正在創建一個登錄頁面。 我目前正忙於 JS 中的驗證部分。

我想知道的是，如果這是正確的做法。

我做了一個邏輯，如果未輸入用戶名，則錯誤消息應出現在用戶名下方，說明Please add your username 。

這就是我做 HTML 元素和 js 邏輯的方式

HTML

<div class="container">

            <form action="" class="form">

            <div class="heading">
                <h1>Log In</h1>
                <p>Welcome to your finacial smart decision making</p>
            </div>
        
            <div class="row mb-3 align-item-center">
                <label for="formGroupEampleInput" class="form-label" id="username">Username</label>
                <input type="text" class="form-control" id="formGroupExampleInput" placeholder="User Name" required>
                <div class="username-error"></div>
            </div>
            <div class="row mb-3 align-item-center">
                <label for="formGroupEampleInput" class="form-label" id="password">Password</label>
                <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Password" required>
                <div class="password-error"></div>
            </div>
            <button type="button" class="btn btn-primary" onclick ="validate()">Login</button>
        </form>

        <div class="side-image-container">

        </div>

JS

function validate(){

let username = document.querySelector("#username");
let password = document.querySelector("#username");
let usernameError = document.querySelector(".username-error");;
const createdEl = document.createElement("div");

 createdEl = document.createTextNode("Please add your username");

 if(!username){
    createdEl.appendChild(usernameError);
 }
}

Answer 1

首先，我建議您使用 id 而不是 class 來獲取 querySelector，因為使用 id 您將獲得單個元素。 但是通過類，您可能會獲得元素列表。

之后，我認為您以錯誤的方式附加孩子，您應該下一步：

usernameError.appendChild(usernameError);

或者你可以使用innerHtml。

最好的方法是：

通常，如果您有要顯示或隱藏的固定文本，則不需要動態創建它並附加到 div。

您可以創建一個類來隱藏它。

html:

<div class="username-error hide">
  Please add your username
</div>

CSS：

.hide{
    display:none;  
}

因此，當您想顯示錯誤時，只需從錯誤元素 (div) 中刪除此類，否則添加它。

js：

if(!username){
  element.classList.remove("hide");
}

Answer 2

let username = document.querySelector("#username");
let password = document.querySelector("#username");
let usernameError = document.querySelector(".username-error");;
let createdEl = document.createElement("div");

let createdE2 = document.createTextNode("Please add your username");

createdEl.appendChild(createdE2);

 if(!username.value){
    usernameError.appendChild(createdEl);
 }
}

改用這個

Answer 3

您的代碼存在多個問題：

1. username和password id 設置在<label>元素上，而不是<input>
2. validate()函數正在嘗試將textNode元素分配給常量
3. 您正在嘗試將現有的.username-error元素附加到新創建的textElement而不是反之亦然
4. 打印錯誤時無法刪除錯誤
5. 由於您的error占位符元素僅包含文本，因此您不需要創建textNode ，您可以簡單地通過textContent屬性更改文本。

這是修復上述所有問題的簡化版本：

 function validate(){ let username = document.querySelector("#username"); let password = document.querySelector("#password"); let usernameError = document.querySelector(".username-error");; let passwordError = document.querySelector(".password-error");; usernameError.textContent = username.value == "" ? "Please add your username" : ""; passwordError.textContent = password.value == "" ? "Please add your password" : ""; }

 <div class="container"> <form action="" class="form"> <div class="heading"> <h1>Log In</h1> <p>Welcome to your finacial smart decision making</p> </div> <div class="row mb-3 align-item-center"> <label for="formGroupEampleInput" class="form-label">Username</label> <input type="text" class="form-control" id="username" placeholder="User Name" required> <div class="username-error"></div> </div> <div class="row mb-3 align-item-center"> <label for="formGroupEampleInput" class="form-label" >Password</label> <input type="text" class="form-control" id="password" placeholder="Password" required> <div class="password-error"></div> </div> <button type="button" class="btn btn-primary" onclick ="validate()">Login</button> </form> <div class="side-image-container"> </div>