PROGRAM 6 - Validation of Registration, Login and
Payment Pages using JavaScript
1. Registration Page Validation - Theory
The Registration page is used to collect user details such as email and password. Before submitting the form, it is
important to verify whether the user has entered correct information. This process is called form validation.
JavaScript client-side validation is used so that checking is done in the browser before submitting the form. The
validation checks that the username has at least 8 characters, both email IDs are not the same, the password has
more than 6 characters, and both passwords match.
Important Functions:
• essentials_of_validation() – Performs all registration checks.
• onsubmit – Calls validation when the form is submitted.
• alert() – Displays warning messages.
• length – Checks the number of characters.
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<script>
function essentials_of_validation(form1)
{
var username1=[Link];
var username2=[Link];
var password1=[Link];
var password2=[Link];
if([Link]<8){
alert("User name must be at least 8 characters");
return false;
}
if(username1==username2){
alert("Both email IDs should not be same");
return false;
}
if([Link]<6){
alert("Password must be more than 6 characters");
return false;
}
if(password1!=password2){
alert("Passwords are not matching");
return false;
}
return true;
}
</script>
</head>
<body bgcolor="yellow">
<center><h2>REGISTRATION FORM</h2></center>
<form name="form1" onsubmit="return essentials_of_validation(this)">
Email ID: <input type="text" name="txtusername1"><br><br>
Password: <input type="password" name="txtpassword1"><br><br>
Confirm Password: <input type="password" name="txtpassword2"><br><br>
Alternate Email: <input type="text" name="txtusername2"><br><br>
<input type="submit" value="Register">
<input type="reset" value="Clear">
</form>
</body>
</html>
2. Login Page Validation - Theory
The Login page allows users to enter their username and password. JavaScript validation ensures that the
username has at least 8 characters, the password has at least 6 characters, and both passwords match. If any
condition fails, an alert message is displayed and the form submission is cancelled.
Important Functions:
• essentials_of_validation() – Validates login details.
• onsubmit – Executes validation before login.
• alert() – Displays error messages.
• length – Checks minimum characters.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script>
function essentials_of_validation(form1)
{
var username=[Link];
var password1=[Link];
var password2=[Link];
if([Link]<8){
alert("Username must be at least 8 characters");
return false;
}
if([Link]<6){
alert("Password must be more than 6 characters");
return false;
}
if(password1!=password2){
alert("Passwords are not matching");
return false;
}
return true;
}
</script>
</head>
<body bgcolor="skyblue">
<center><h2>Login Page</h2></center>
<form name="form1" onsubmit="return essentials_of_validation(this)">
Username: <input type="text" name="txtusername"><br><br>
Password: <input type="password" name="txtpassword1"><br><br>
Confirm Password: <input type="password" name="txtpassword2"><br><br>
<input type="submit" value="Login">
<input type="reset" value="Reset">
</form>
</body>
</html>
3. Payment Page Validation - Theory
The Payment page is used to enter card details and expiry date. JavaScript checks whether the card number is
numeric and whether the card has expired. The current date is obtained using the Date object and compared with
the entered expiry date.
Important Functions:
• Date() – Gets current system date.
• isNaN() – Checks whether card number is numeric.
• getFullYear(), getMonth(), getDate() – Returns current year, month and date.
• alert() – Displays validation messages.
• essentials_of_validation() – Performs payment validation.
<!DOCTYPE html>
<html>
<head>
<title>Payment</title>
<script>
function essentials_of_validation(form1)
{
var current=new Date();
var acc=[Link];
var dd=parseInt([Link]);
var mm=parseInt([Link]);
var yyyy=parseInt([Link]);
if(isNaN(acc)){
alert("Not a valid card number");
return false;
}
if(yyyy>[Link]() ||
(yyyy==[Link]() && mm>([Link]()+1)) ||
(yyyy==[Link]() && mm==([Link]()+1) && dd>[Link]()))
{
alert("Card is valid");
return true;
}
else{
alert("Your card has expired");
return false;
}
}
</script>
</head>
<body bgcolor="pink">
<center><h2>Payment Page</h2></center>
<form name="form1" onsubmit="return essentials_of_validation(this)">
Card Number: <input type="text" name="txtusername"><br><br>
Expiry Date:
<input type="text" name="dd" size="2"> /
<input type="text" name="mm" size="2"> /
<input type="text" name="yyyy" size="4"><br><br>
<input type="submit" value="Pay">
<input type="reset" value="Clear">
</form>
</body>
</html>
Outcome: Thus, Registration, Login and Payment pages were successfully validated using JavaScript.