I want to append error message on div element

Question

I am creating a sign-in page. I am currently busy with validation part in JS.

What I wan to know, if this is the correct way in doing it.

I did a logic that says if username is not entered error message should appear below the username stating Please add your username .

This is how I did the HTML element and js logic

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

First of all I would recommend you using id instead of class to get querySelector, because, with id you will get a single element. but with class you may get list of elements.

After, I think you are appending in wrong way the child, you should do next:

usernameError.appendChild(usernameError);

Or you can use innerHtml.

The best way to do that:

Normally, if you have a fixed text to show or hide, you don't need to create it dynamically and append to a div.

You can create a class to hide it.

html:

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

css:

.hide{
    display:none;  
}

So, when you want to show the error just remove this class from your error element (div), otherwise add it.

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

Use this instead

Answer 3

There are multiple issues with your code:

1. username and password id is set on <label> element, not <input>
2. validate() function is trying assign a textNode element to a constant
3. you are trying to append existing .username-error element to a newly created textElement instead of vise-versa
4. when error printed there is no way remove the error
5. since your error placeholder element contains just text, you don't need create textNode , you can simply change the text via textContent property.

Here is simplified version that fixes all the above:

 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>