Basic Form Validation on Javascript
• Shallom Kyle Jacinto
April 21st 2021 • 1 minute read
In this article we will be doing a basic form validation for validating on our forms before data will be sent to database.
HTML Structure
This is our structure for our form, copy this codes or you can make with your own.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form>
<label>Email:</label><br>
<input type="text" placeholder="email"><br>
<label>Password:</label><br>
<input type="password" placeholder="password"><br>
<button>Login</button>
</form>
<script>
</script>
</body>
</html>
Input ID's
For our email input, we add an id of email to access the value from email input and the same for our input password we add id of password.
<input type="text" placeholder="email" id="email">
<input type="password" placeholder="password" id="password">
For our login button, we add an attribute of onclick so this will be called when there is click event and to handle function, we named it to login().
<button onclick="login()">Login</button>
Temporary Db
We create a variable DbEmail, which is we assume that these is our email from database that we want to validate and the same for our DbPass variable. Put this inside to our script tag.
<script>
const DbEmail = "skjblog@example.com";
const DbPass = "somepassword";
...
</script>
Login Function
This function will be called when user clicks the login button.
Then we create a variable of email which is from user input email with a querySelector to get the Id from input with an attribute of .value to get the value from our inputs. The same as for password input.
function login() {
const email = document.querySelector("#email").value;
const pass = document.querySelector("#password").value;
...
}
Form Validation
First we validate is if input are empty then it should throw an error, for now we just display it with alert.
// if email is empty or password then throw error
if(!email || !pass) {
alert('Email and password is required!')
} else {
...
}
If there is email and password then in our else statement we add another if if our email and DbEmail is not the same then it should throw an error.
else {
// throw error if email and DbEmail is not equal or not the same
if(email !== DbEmail) {
alert('Email not found in Database!')
}
}
If our email and DbEmail is equal then we pass another statement which is else if to validate our password. The Process still the same from email and DbEmail.
else if(pass !== DbPass) {
alert('Password incorrect!')
}
and finally if our user pass all validations then we add another statement which is else to display that user is now logged in.
else {
alert('Successfully Logged in!')
}
Complete code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<form>
<label>Email:</label><br>
<input type="text" placeholder="email" id="email"><br>
<label>Password:</label><br>
<input type="password" placeholder="password" id="password"><br>
<button onclick="login()">Login</button>
</form>
<script>
const DbEmail = 'skjblog@example.com';
const DbPass = "somepassword";
function login() {
const email = document.querySelector("#email").value;
const pass = document.querySelector("#password").value;
if(!email || !pass) {
alert('Email and Password is required!')
} else {
if(email !== DbEmail) {
alert('Email not found in Database!')
} else if(pass !== DbPass) {
alert('Password incorrect!')
} else {
alert('Login Success!')
}
}
}
</script>
</body>
</html>