如何正确在div元素中追加登录页JS表单校验错误提示

我正在开发一个登录页面，目前在编写JavaScript表单校验相关逻辑，想确认当前的实现方式是否正确。
我设计的校验逻辑为：若用户未输入用户名，需要在用户名输入框下方显示内容为Please add your username的错误提示。
以下是我编写的HTML结构与JavaScript逻辑代码：

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

JavaScript 代码 #

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

错误信息预期显示位置：

你的现有代码无法实现预期效果，存在几处基础错误，逐一说明：

• 元素选择错误：#username 对应的是用户名的<label>标签，不是你要取值的输入框；密码字段的选择器也错写成了#username，根本没有选中密码输入框。另外两个输入框共用同一个idformGroupExampleInput，本身就不符合HTML规范，label的for属性还存在拼写错误（Eample应为Example），和输入框id不匹配。
• 语法错误：用const声明的createdEl属于常量，后续重新赋值会直接抛出类型错误。
• DOM逻辑写反：你已经提前在HTML里写好了用于放错误提示的.username-error容器，不需要额外创建节点，更不是把容器追加到文本节点里。
• 判断逻辑错误：if(!username)判断的是label元素是否存在，永远不会进入判断分支，你实际需要判断的是输入框的内容是否为空。

修正后可直接运行的代码 #

修正后的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上多余的id，for属性和输入框id一一对应 -->
            <label for="usernameInput" class="form-label">Username</label>
            <input type="text" class="form-control" id="usernameInput" placeholder="User Name" required>
            <div class="username-error" style="color: #dc3545; font-size: 14px; margin-top: 4px;"></div>
        </div>
        <div class="row mb-3 align-item-center">
            <label for="passwordInput" class="form-label">Password</label>
            <!-- 密码框type改为password，修复重复id问题 -->
            <input type="password" class="form-control" id="passwordInput" placeholder="Password" required>
            <div class="password-error" style="color: #dc3545; font-size: 14px; margin-top: 4px;"></div>
        </div>
        <button type="button" class="btn btn-primary" onclick="validate()">Login</button>
    </form>
    <div class="side-image-container"></div>
</div>

修正后的JavaScript #

function validate(){
    // 正确获取用户名输入框和错误提示容器
    const usernameInput = document.querySelector("#usernameInput");
    const usernameError = document.querySelector(".username-error");
    
    // 每次校验先清空旧的错误提示，避免重复叠加
    usernameError.textContent = "";
    usernameInput.style.borderColor = "";

    // 去除首尾空格后判断是否为空，避免用户输入纯空格绕过校验
    if (usernameInput.value.trim() === "") {
        usernameError.textContent = "Please add your username";
        usernameInput.style.borderColor = "#dc3545";
        // 校验不通过直接终止后续逻辑
        return false;
    }

    // 校验通过后可在这里追加密码校验、表单提交逻辑
    return true;
}

修正后的逻辑完全符合你的预期：点击登录按钮时如果用户名为空，红色错误提示会直接显示在用户名输入框下方的预留位置；用户输入内容后再次触发校验，错误提示会自动消失。

内容的提问来源于stack exchange，提问作者Sheldon