Scribd
Upload
19 views

Web Technology Exp4

Uploaded by

PRIYANSHU SINGHAL
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Web Technology Exp4

Uploaded by

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

PRACTICAL: 4

AIM: Write programs using HTML and Java Script for validation of input data.

THEORY: Input validation is the process of verifying and ensuring that user-provided data conforms
to the expected format before it is processed by the system. Validation can occur on both the client
side (before submission) and the server side (after submission). Client-side validation is typically
implemented using JavaScript, ensuring that data is correctly formatted before it is sent to the server.
This helps to reduce unnecessary network traffic and provides immediate feedback to the user.
❖ Purpose and Scope:
• Purpose: The purpose of this experiment is to demonstrate the use of client-side
validation techniques in web forms using HTML and JavaScript. The goal is to ensure
that user inputs are correct, complete, and secure before being processed or stored by
the system.
• Scope: This experiment focuses on the validation of basic input fields in a web form,
including:
1. Text fields (e.g., name and email)
2. Password fields (e.g., ensuring minimum length and complexity)
3. Numeric fields (e.g., age, ensuring a valid number is entered within a specified
range)
❖ JavaScript for Validation: JavaScript is a programming language commonly used to provide
dynamic and interactive features in web pages. In input validation, JavaScript is responsible
for:
• Checking that fields are filled before the form is submitted.
• Ensuring that the input follows specific rules (e.g., checking for a valid email address).
• Providing instant feedback to users in case of validation errors.
• Preventing the form from being submitted if the validation fails.
❖ Conclusion: In this lab, we implemented client-side input validation using HTML and
JavaScript, ensuring form data is correctly formatted before submission. This improved user
experience by providing real-time feedback, reduced server load by preventing invalid data
submission, and enhanced security by mitigating risks like injection attacks. While client-side
validation improves efficiency and user interaction, it should always be complemented with
server-side validation to ensure comprehensive security and data integrity.

SOURCE CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Entry Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-container {
background-color: rgb(151, 37, 204);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input, select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.radio-group {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
<script>
function validateForm() {
// Validate first name and last name
var firstName = document.getElementById("name").value;
var lastName = document.getElementById("lastname").value;
if (!/^[A-Za-z]+$/.test(firstName) || !/^[A-Za-z]+$/.test(lastName)) {
alert("Name should only contain letters.");
return false;
}
var email = document.getElementById("email").value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
var mobile = document.getElementById("mobile").value;
if (!/^\d{10}$/.test(mobile)) {
alert("Mobile number must be 10 digits.");
return false;
}
var dob = document.getElementById("dob-day").value;
if (!/^\d{2}\/\d{2}\/\d{4}$/.test(dob)) {
alert("Date of Birth must be in format DD/MM/YYYY.");
return false;
}
var nationality = document.getElementById("Nationality").value;
if (nationality === "") {
alert("Please select your nationality.");
return false;
}
return true;
}
</script>
</head>
<body>
<div class="form-container">
<h2>Entry Form
</h2>
<form action="submit_form.php" method="POST" onsubmit="return validateForm()">
<div class="form-group">
<label>Position:</label>
<div class="radio-group">
<label><input type="radio" name="position" value="student" required> Student
</label>
<label><input type="radio" name="position" value="employee"> Employee
</label>
<label><input type="radio" name="position" value="faculty"> Faculty
</label>
</div>
</div>
<div class="form-group">
<label for="name">First Name:
</label>
<input type="text" id="name" name="name" required placeholder="Enter your First
Name">
</div>
<div class="form-group">
<label for="lastname">Last Name:
</label>
<input type="text" id="lastname" name="lastname" required placeholder="Enter your Last
Name">
</div>
<div class="form-group">
<label for="dob">Date of Birth (dd/mm/yyyy):
</label>
<input type="text" id="dob-day" name="dob-day" placeholder="DD/MM/YYYY" required>
</div>
<div class="form-group">
<label for="Nationality">Nationality:
</label>
<select id="Nationality" name="Nationality" required>
<option value="" disabled selected>Select your Nationality
</option>
<option value="Indian">Indian</option>
<option value="Foreigner">Foreigner</option>
</select>
</div>
<div class="form-group">
<label for="gender">Gender:
</label>
<select id="gender" name="gender" required>
<option value="" disabled selected>Select your gender
</option>
<option value="male">Male
</option>
<option value="female">Female </option>
<option value="other">Other </option>
<option value="prefer_not_to_say">Prefer not to say</option>
</select>
</div>
<div class="form-group">
<label for="email">Email:
</label>
<input type="email" id="email" name="email" required placeholder="Enter your E-mail
address">
</div>
<div class="form-group">
<label for="mobile">Mobile No:
</label>
<div style="display: flex;">
<select id="country-code" name="country-code" required style="width: 20%; padding: 8px;
border: 1px solid #ccc; border-radius: 4px 0 0 4px; box-sizing: border-box;">
<option value="+91">+91
</option>
<option value="+1">+1
</option>
<option value="+44">+44
</option>
<option value="+61">+61
</option>
<option value="+81">+81
</option>
<!-- Add more country codes as needed -->
</select>
<input type="text" id="mobile" name="mobile" required placeholder="Enter your Mobile No"
style="width: 80%; padding: 8px; border: 1px solid #ccc; border-radius: 0 4px 4px 0; box-sizing:
border-box;">
</div>
</div>
<div class="form-group">
<label for="department">Department:</label>
<input type="text" id="department" name="department" required placeholder="Enter your
Department">
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea id="address" name="address" required placeholder="Enter your complete address"
rows="4" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing:
border-box;">
</textarea>
</div>
<div class="form-group">
<label for="experience">Experience:
</label>
<textarea id="address" name="address" required placeholder="Enter your Experience" rows="4"
style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-
box;">
</textarea>
</div>
<button type="submit">Submit
</button>
</form>
</div>
</body>
</html>
OUTPUT:

You might also like