simple validation form with javascript
Question
i have a 'div' tag included error message on the my form. this tag displaying when button is clicked and inputs are null. my code is working but, 'div' tag is hide speedly.
<htlm>
<head>
</head>
<body>
<div id="ShowError">
<h3>Username Or Password is incorrect.</h3>
</div>
<form id="Main" method="POST">
<input id="User" type="text" name="Name" placeholder="Enter Your Username">
<br>
<input id="Pass" type="password" name="Pass" placeholder="Enter Your Password"/>
<br>
<button id="bt">Login</button>
<button >Cancel</button>
</form>
</body>
<script src=""></script>
</html>
div#ShowError{
opacity:0.0;
}
var btn = document.getElementById("bt");
btn.addEventListener("click",func);
var Username = document.getElementById("User");
var Password = document.getElementById("Pass");
function func()
{
if(Username.value == "" || Password.value == "")
{
document.getElementById("ShowError").style.opacity = "1.0";
}
}
2 answers
solution1
4 2019-05-29 14:00:03
Clicking a submit button will submit the form.
So the JavaScript runs, the form submits, and a new page is loaded. The JavaScript hasn't run on the new page.
Prevent the default behaviour of the event if you don't want the form to submit.
function func(e)
{
if(Username.value == "" || Password.value == "")
{
e.preventDefault();
document.getElementById("ShowError").style.opacity = "1.0";
}
}
solution2
0 ACCPTED 2019-05-29 14:26:52
If I understand you correctly you want to slowdown the opacity change of validation error message. For example, slowly change opacity 0.0 to 1.0, right? If so, for slow change of opacity of the validation error message you have to add the css transition property using javascript to your validation error message div.
function func(event)
{
if(Username.value == "" || Password.value == "")
{
document.getElementById("ShowError").style.transition = "all 2s"
document.getElementById("ShowError").style.opacity = 1;
}
}
and also to stop reloading the page when you click login button you can include type="button" in your login button
<button type="button" id="bt">Login</button>
Working demo :
var btn = document.getElementById("bt"); btn.addEventListener("click",func); //document.getElementById("ShowError").style.transition = "all 2s" var Username = document.getElementById("User"); var Password = document.getElementById("Pass"); Username.addEventListener("input",func2) Password.addEventListener("input",func2) function func(event) { if(Username.value == "" || Password.value == "") { document.getElementById("ShowError").style.transition = "all 2s" document.getElementById("ShowError").style.opacity = 1; } } function func2(){ if(Username.value !== "" && Password.value !== ""){ document.getElementById("ShowError").style.transition = "all 2s" document.getElementById("ShowError").style.opacity = 0; } }
div#ShowError{ opacity:0.0; }
<div id="ShowError"> <h3>Username Or Password is incorrect.</h3> </div> <form id="Main" method="POST"> <input id="User" type="text" name="Name" placeholder="Enter Your Username"> <br> <input id="Pass" type="password" name="Pass" placeholder="Enter Your Password"/> <br> <button type="button" id="bt">Login</button> <button >Cancel</button> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.