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

The HTML5 placeholder attribute is not a substitute for the label element — Quentin
– Quentin, Commented May 29, 2019 at 14:00
var Username — Variable names starting with a capital letter are traditionally reserved for Constructor Functions in JavaScript. Don't use them for other kinds of value. — Quentin
– Quentin, Commented May 29, 2019 at 14:00
btn.addEventListener("click",func); — In general, it is better to use the submit event of the form over a click event of a submit button. — Quentin
– Quentin, Commented May 29, 2019 at 14:02

Quentin · Accepted Answer · 2019-05-29 14:00:03Z

5

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

answered May 29, 2019 at 14:00

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lain Over a year ago

Classics never die :-)

AL-zami · Accepted Answer · 2019-05-31 14:02:55Z

1

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>

edited May 31, 2019 at 14:02

answered May 29, 2019 at 14:26

AL-zami

9,20417 gold badges79 silver badges138 bronze badges

2 Comments

Hamid Over a year ago

Thank you...but if inputs are filled error message not hiding on the form

AL-zami Over a year ago

@hamid You need to track if there is any change in the input value to achieve this functionality. Add eventListener to both of your input field. Check the updated answer

Collectives™ on Stack Overflow

simple validation form with javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related