I want to append error message on div element

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