Login Form Validation Using JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of login form validation using JavaScript, here we created form with onsubmit event so when user giving their login ‘user name and password’ and submit the form it will validate user name and password with stored details if they provides same details it will shows success message otherwise it will throws failure message.
In this way we can identify who are right users and it won’t allow unauthorized persons to do further process so our users can feel the safety because unauthorized persons can’t use users details easily.
Step By Step Guide On Login Form Validation Using JavaScript :-
Here we defined form with two input fields for collect users login ‘user name,password’ details and submit button for submit user forms.
When user clicks on submit button ‘onsubmit’ event will occur and within that we defined function validation() call will initialized.
In validation() method we have to collects user entered login information’s and stored to variables ‘un,ps’ then using if condition we checking entered details with stored details.
If condition return true means success message will appear on alertbox otherwise it return false and error message will throw.
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM VALIDATION</title>
</head>
<body>
<h2>LOGIN FROM</h2>
<form method="post" onsubmit="validation()">
<input type="text" id="uname" placeholder="user name"><br>
<input type="text" id="pswd" placeholder="password"><br>
<input type="submit" value="Submit" id="sub">
</form>
<script>
function validation(){
var un=document.getElementById('uname').value;
var ps=document.getElementById('pswd').value;
if (un == "john" && ps == "john@123"){
window.alert("Login Successful");
}
else{
window.alert("Login Failed");
}
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- We defined form with ‘onsubmit’ event, it used to declare validation() function call. Within form we defined two input fields with attributes ‘type,id,placeholder’.
- The attribute ‘type’ used to define input type, ‘id’ used to collect users ‘user name,password’ and ‘placeholder’ used to shows what type of input users need to give on input fields. Lastly we defined ‘submit’ button by ‘submit’ type input tag.
- In <script> tag we defined function validation() within that we collects users ‘user name,password’ details and stored to respective variables ‘un,ps’. Then we checking user entered ‘user name,password’ with predefined values of ‘john, john@123’.
- If both are same then success message of ‘Login Successful’ will appear in alert box, otherwise error message of ‘Login Failed’ will displayed on alert box.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to validate login form in javascript.
When we execute our program on browser we can see the result of login form with two input fields for provide user login information and submit button, when user clicks on submit button it checks input details and show respective message on alert box.
When we need to handle multiple users credentials we need to store their details on server then we can easily check each users details.
If user provided information not same with predefined detail then it will throw error message otherwise it throws success message.
I hope this tutorial on login form validation using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
