How To Validate Username And Password In JavaScript From Database
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this tutorial we will show you the solution of how to validate username and password in JavaScript from database, this type of validation is required when we create a login page.
And if the user delivers the wrong information, then required then there must be an error from JavaScript.
Now, one thing more to notice here is that we are going to establish a database connection in this tutorial.
So, it seems to be complex and our today’s questions become. How to validate username and password in JavaScript in JavaScript from the database.
Step By Step Guide On How To Validate Username And Password In JavaScript From Database :-
Here, we will give you an example below that helps us to understand how to apply validation in JavaScript on username and password in JavaScript from the database.
Let us see the below example first and then understand step by step.
<?php
if(isset())
$connect = mysqli_connect("localhost", "root", "", "database_name");
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
$query = " SELECT * FROM table_name where username = $username and password = $password";
$result = mysqli_query($connect, $query);
$row = mysqli_num_rows($result);
if($row == 1){
echo " CONGRATULATIONS! You will be redirected to the dashboard.";
} else{
echo "ERROR!! Sorry Given credentials do not match with our records"
}
?>
<!doctype html>
<html>
<head>
<title> JavaScript Validation </title>
</head>
<body>
<h1>
Talkerscode – JavaScript Validation
</h1>
<h2>
How to validate username and password in JavaScript from a database
</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/>
<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;
if(username == "" )
{
alert("Please enter your username first.");
form_val.username.focus();
return false;
}
if(username.length<6)
{
alert("username must be at least 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 8 digits");
form_val.password.focus();
return false;
}
return true;
}
</script>
</body>
</html>- Here, we see that we create an HTML form first and we create a basic structure to create an 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 and password as a field. And then a button, on click of that button our form gets submitted and we will see is there any error or not using JavaScript.
- Now, let us understand our JavaScript. Here, we create a function that calls for the submission of the form. And inside this function, first, we get the value that the user feeds inside the field. If any field is empty, and the username and password are less than 6 and 8 characters then it will show an error message.
- After that when the validation from JavaScript get completed then our PHP codes come into action and get the required data from input fields and then check from the database that whether the data matched with our records or not.
- If the data is matched with our records from database, then an alert will be shown of successful login otherwise an error will be displayed.
- For reference, you can see the above code that how we apply validations on username and password in JavaScript from the database.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we can understand how to apply validation on username and password in JavaScript.
I hope this tutorial on how to validate username and password in JavaScript from database helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
