Username And Password Validation In JavaScript Code
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of username and password validation in JavaScript code, this type of validation is required when we create a login page. And if user delivers wrong information then required then there must be an error from JavaScript.
This validation is not linked with database means this validation is not checking user’s data with database. This is pre validation which is required before database data checking.
Step By Step Guide On Username And Password Validation In JavaScript Code :-
Here, we will give you an example below that helps us to understand how to apply validation in JavaScript on username and password.
Let us see the below example first and then understand step by step.
<!doctype html>
<html>
<head>
<title> JavaScript Validation </title>
</head>
<body>
<h1>
Talkers code – JavaScript Validation
</h1>
<h2>
Username and Password validation in JavaScript
</h2>
<form action="#" onsubmit="return validation(argu)" method="post" >
<label>
Enter Username:
</label>
<input type="text" name="username "/><br/>
<label>
Enter Password:
</label>
<input type="password" name="password"/><br/>
<label>
Confirm Password:
</label>
<input type="password" name="cpassword"/><br/>
<input type="submit" value="login"/>
</form>
// JavaScript code here
<script type="text/javascript">
function validation(form_val)
{
var username = form_val.username.value;
var password = form_val.password.value;
var cpassword = form_val.cpassword.value;
if(username == "" )
{
alert("please enter your username first.");
form_val.username.focus();
return false;
}
if(username.length<6)
{
alert("username must be at least of 6 characters.");
form_val.username.focus();
return false;
}
if(password == " ")
{
alert("please enter your password.");
form_val.password.focus();
return false;
}
if(password.length<8)
{
alert("password must contain at least of 8 digits");
form_val.password.focus();
return false;
}
if(cpassword == "")
{
alert("please enter confirm password field.");
form_val.cpassword.focus();
return false;
}
if(password.length >= 8 && cpassword.length >= 8 )
{
if(password != cpassword)
{
alert("Password and Confirm Password does not matched. Try again later. ");
return false;
}
}
return true;
}
</script>
</body>
</html>
- Here, as we see that we create an html form first and we create a basic structure to create html form. We hope that you all know about basic html. In this we used our html, head, title, body, script and other tags also.
- Now, after that inside form, we create a form for username, password and confirm password field. And then a button, on click of that button our form get submitted and we will see is there any error or not using JavaScript.
- Now, let us understand about our JavaScript. Here, we create a function which call at submission of form. And inside this function, first we get the value that user feed inside field. If any field is empty, and username and password is less than 6 and 8 characters then it will shows an error message.
- Now, if confirm password and password does not matched then it again shows an error. We hope you understand the validation that we applied using JavaScript codes. For reference you can see the above code that how we apply validations and created a form, etc.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to apply validation on username and password in JavaScript.
I hope this tutorial on username and password validation in JavaScript code helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
