EXPERIMRNT-09
1
0
9
8
AIM-Validate the HTML form using JavaScript
7
and implement event handling.
6
5
THEORY-
4
JavaScript is a scripting language used to make web pages interactive and
dynamic. Form validation is the process of checking whether the user has
3
entered valid and complete information before submitting the form.
2
JavaScript validation helps:
1
● Prevent empty fields
● Ensure correct data format
● Improve data accuracy
● Reduce invalid submissions
Event handling in JavaScript is used to perform actions when specific
events occur, such as clicking a button, submitting a form, or typing in a
field. Common events include:
● onclick
● onsubmit
● onchange
● onkeyup
Using JavaScript form validation and event handling improves user
interaction and enhances the functionality of web applications.
PROCEDURE-
. Open a text editor such as Notepad or VS Code.
. Create a new HTML file and save it with the .html extension.
. Write the basic HTML structure using <html>, <head>, and <body>
tags.
. Create an HTML form with input fields such as name, email, and
password.
. Add a submit button to the form.
. Write JavaScript code inside the <script> tag.
. Use event handling methods such as onsubmit and onclick.
. Validate form fields using JavaScript conditions.
. Display alert messages if fields are empty or invalid.
. Save the file and run it in a web browser to test validation and event
handling.
PROGRAM-
<!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>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 350px;
margin: 80px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px gray;
}
h2 {
text-align: center;
}
input {
width: 100%;
padding: 10px;
margin-top: 10px;
margin-bottom: 15px;
}
button {
width: 100%;
padding: 10px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
.error {
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form id="myForm">
<input type="text" id="name" placeholder="Enter Name">
<div class="error" id="nameError"></div>
<input type="email" id="email" placeholder="Enter Email">
<div class="error" id="emailError"></div>
<input type="password" id="password" placeholder="Enter
Password">
<div class="error" id="passwordError"></div>
<button type="submit">Submit</button>
</form>
</div>
<script>
// Event Handling for Form Submission
[Link]("myForm").addEventListener("submit",
function(event) {
[Link]();
// Get Input Values
let name = [Link]("name").value;
let email = [Link]("email").value;
let password = [Link]("password").value;
// Error Elements
let nameError = [Link]("nameError");
let emailError = [Link]("emailError");
let passwordError = [Link]("passwordError");
// Clear Previous Errors
[Link] = "";
[Link] = "";
[Link] = "";
let isValid = true;
// Name Validation
if(name === "") {
[Link] = "Name is required";
isValid = false;
}
// Email Validation
if(email === "") {
[Link] = "Email is required";
isValid = false;
}
// Password Validation
if([Link] < 6) {
[Link] = "Password must be at least 6
characters";
isValid = false;
}
// Success Message
if(isValid) {
alert("Form Submitted Successfully!");
}
});
</script>
</body>
</html>
OUTCOME-
RESULTS/CONCLUSION-
Thus, an HTML form was successfully validated using JavaScript, and
event handling was implemented. The experiment demonstrated how
JavaScript can be used to check user input, display validation messages,
and handle form submission events effectively.