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 >

            <form action="" >

            <div >
                <h1>Log In</h1>
                <p>Welcome to your finacial smart decision making</p>
            </div>
        
            <div >
                <label for="formGroupEampleInput"  id="username">Username</label>
                <input type="text"  id="formGroupExampleInput" placeholder="User Name" required>
                <div ></div>
            </div>
            <div >
                <label for="formGroupEampleInput"  id="password">Password</label>
                <input type="text"  id="formGroupExampleInput" placeholder="Password" required>
                <div ></div>
            </div>
            <button type="button"  onclick ="validate()">Login</button>
        </form>

        <div >

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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 >

            <form action="" >

            <div >
                <h1>Log In</h1>
                <p>Welcome to your finacial smart decision making</p>
            </div>
        
            <div >
                <label for="formGroupEampleInput" >Username</label>
                <input type="text"   id="username" placeholder="User Name" required>
                <div ></div>
            </div>
            <div >
                <label for="formGroupEampleInput"  >Password</label>
                <input type="text"  id="password" placeholder="Password" required>
                <div ></div>
            </div>
            <button type="button"  onclick ="validate()">Login</button>
        </form>

        <div >

        </div>