Scribd
Upload
18 views

WebTech (P3)

Web Technology Lab Practical 3 AKTU

Uploaded by

dishashukla0104
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

WebTech (P3)

Web Technology Lab Practical 3 AKTU

Uploaded by

dishashukla0104
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Practical-3

Objective: Create a registration form using html and validate each input using
javascript before its final submission.

Introduction
Form validation is essential for ensuring that the data submitted by users meets certain
criteria, and JavaScript is commonly used to handle client-side form validation. Here are key
elements involved in form validation using JavaScript in HTML.
The Submit event is captured to prevent form submission if the validation fails. You typically
attach an event listener to the form's submit event.
Required Field Check Ensure that a field is not empty.

Length Check Ensure that the input meets a minimum or maximum character length.
Email Format Check Use a regular expression to ensure that an input is in a valid email
format.
Displaying error messages If validation fails, you'll want to show a message to the user
explaining what went wrong.
Password
• Required: Password field should not be empty.
• Length Validation: Usually, a minimum length is enforced (e.g., at least 8 characters).
• Complexity: Many systems require passwords to contain a combination of
upper/lowercase letters, numbers, and special characters.
• Confirmation: A second password field (confirm password) to ensure the user
entered the same password.
Phone Number
• Required: Ensure the phone number is not empty.
• Format Validation: Phone numbers should follow a valid format depending on the
country. You can use regular expressions to ensure proper formatting (e.g., XXX-XXX-
XXXX for US numbers).
• Length Validation: Ensure it has the correct number of digits (e.g., 10 digits for US).
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;

}
#label, #gender { font-weight: bold; font-size: 20px;
}
body {
display: flex;
justify-content: center; height: 100vh;
background-color: whitesmoke;
}
#n1, #n2, #n3, #n4, #n5, #n6, #n7, #n8 {
font-size: 25px; border-radius: 7px; width: 100%;
}
#n1:hover, #n2:hover, #n3:hover, #n4:hover, #n5:hover, #n7:hover, #n8:hover { background-color:
whitesmoke;
}
.container {
border: 2px solid rgb(160, 7, 78); width: 700px;
height: auto; padding: 20px; border-radius: 10px;
background-color: rgb(245, 165, 202);
}
.h1 {
text-align: center;

}
.inline {
display: inline-block; vertical-align: middle; font-weight: bold; font-size: 20px;
}
</style>
</head>
<body>
<script>
function data() {
var a = document.getElementById("n1").value; var b = document.getElementById("n2").value; var c =
document.getElementById("n3").value; var d = document.getElementById("n4").value; var e =
document.getElementById("n5").value; var f = document.getElementById("n6").value; var g =
document.getElementById("n7").value;
if (a == "" || b == "" || c == "" || d == "" || e == "" || g == "") { alert("All fields are mandatory");
return false;
}
if (c.length != 10 || isNaN(c)) {
alert("Contact Number should be a valid 10-digit number!"); return false;
}
if (d !== e) {
alert("Please enter the same password!"); return false;
}
var genderSelected = document.querySelector('input[name="gender"]:checked'); if (!genderSelected) {
alert("Please select your gender!"); return false;
}
return true;
}
</script>
<div class="container">
<h1 class="h1">Registration Form</h1>
<hr>
<form onsubmit="return data()" action="">
<label id="label" for="n1">User Name:</label><br>
<input type="text" id="n1" required><br><br>
<label id="label" for="n2">E-mail:</label><br>
<input type="email" id="n2" required><br><br>
<label id="label" for="n3">Contact:</label><br>
<input type="text" id="n3" required><br><br>
<label id="gender">Gender:</label><br>
<label class="inline">
<input type="radio" name="gender" value="Male"> Male<br>
<input type="radio" name="gender" value="Female"> Female<br>
<input type="radio" name="gender" value="Other"> Other<br>
</label><br><br>
<label id="label" for="n4">Password:</label><br>
<input type="password" id="n4" required><br><br>
<label id="label" for="n5">Confirm Password:</label><br>
<input type="password" id="n5" required><br><br>
<label id="label" for="n7">Address:</label><br>
<textarea id="n7" rows="4" cols="20" required></textarea><br><br>
<input type="submit" id="n8" value="Submit Form">
</form>
</div>
</body>
</html>

Output:

You might also like