Instead of creating a new element every time, have the element in the html but empty then when you have an error put the message in.
<div id='new'><p></p></div>
var element = document.querySelector("#new p");
if(input_name.value =="" ||input_email.value =="" || input_password.value =="")
{
element.innerHTML = 'all input are reqired';
}
else{
element.innerHTML = '';
}
If I understand correctly, do you want this.
if(input_name.value =="" ||input_email.value =="" || input_password.value =="")
{
if(document.getElementById("validationmessage"))return;
var tag = document.createElement("p");
tag.id="validationmessage";
var text = document.createTextNode("all input are reqired");
tag.appendChild(text);
var element = document.getElementById("new");
element.appendChild(tag);
}
And you need remove the “validationmessage” when it valid.
if(input_name.value !="" &&input_email.value !="" && input_password.value !="")
{
var tag = document.getElementById("validationmessage");
if(!tag)return;
var element = document.getElementById("new");
element.removeChild(tag);
}
function validate(){
const validationError = document.getElementById("requiredMsg");
const pass = document.getElementById("pass");
const name = document.getElementById("name");
const email = document.getElementById("email");
if(name.value=="" || email.value=="" || pass.value==""){
validationError.classList.replace("hide", "show");
return;
}else{
validationError.classList.replace("show", "hide");
}
}.show{
display:block
}
.hide{
display:none
}<p class="hide" id="requiredMsg">All Inputs are required.</p>
Name <input type="text" name="name" id="name">
Pass <input type="password" name="pass" id="pass">
Email <input type="email" name="email" id="email">
<button onClick="validate()">Validate</button>I am trying to add appendchild only once when I click submit, but it shows many times.
if(input_name.value =="" ||input_email.value =="" || input_password.value =="")
{
var tag = document.createElement("p");
var text = document.createTextNode("all input are reqired");
tag.appendChild(text);
var element = document.getElementById("new");
element.appendChild(tag);
}
So you click the submit button once and you get many
no when condition true it show one time but when I click agin it show agin I want to make it one time only when Iclick not many time