Scribd
Upload
12 views10 pages

Lab3 Form Validation

js form validation code

Uploaded by

Sruthi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views10 pages

Lab3 Form Validation

js form validation code

Uploaded by

Sruthi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

LAB ASSIGNMENT 3

FORM VALIDATION USING JAVASCRIPT

Student Registration for hackathon event-Yugam 2024

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration for Hackathon - Yugam 2024</title>
<style>

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

.container {
max-width: 500px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.form-group input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #0c7054;
border: none;
border-radius: 5px;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.form-group input[type="submit"]:hover {
background-color: #0056b3;
}

.error-message {
color: red;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>

<div class="container">
<h1>Student Registration for Hackathon - Yugam 2024</h1>
<form id="registrationForm" action="#" onsubmit="return validateForm()">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" >
<div id="nameError" class="error-message"></div>
</div>
<div class="form-group">
<label for="rollNumber">Roll Number:</label>
<input type="text" id="rollNumber" name="rollNumber" >
<div id="rollNumberError" class="error-message"></div>
</div>
<div class="form-group">
<label for="department">Department:</label>
<input type="text" id="department" name="department" >
<div id="departmentError" class="error-message"></div>
</div>
<div class="form-group">
<label for="collegeName">College Name:</label>
<input type="text" id="collegeName" name="collegeName">
<div id="collegeNameError" class="error-message"></div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<div id="emailError" class="error-message"></div>
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number:</label>
<input type="tel" id="phoneNumber" name="phoneNumber" >
<div id="phoneNumberError" class="error-message"></div>
</div>
<div class="form-group">
<label for="teamSize">Team Size:</label>
<input type="number" id="teamSize" name="teamSize" min="1" >
<div id="teamSizeError" class="error-message"></div>
</div>
<div class="form-group">
<label for="projectName">Project Name:</label>
<input type="text" id="projectName" name="projectName">
<div id="projectNameError" class="error-message"></div>
</div>
<div class="form-group">
<input type="submit" value="Register">
</div>
</form>
</div>

<script>
function validateForm() {
var name = document.getElementById("name").value;
var rollNumber = document.getElementById("rollNumber").value;
var department = document.getElementById("department").value;
var collegeName = document.getElementById("collegeName").value;
var email = document.getElementById("email").value;
var phoneNumber = document.getElementById("phoneNumber").value;
var teamSize = document.getElementById("teamSize").value;
var projectName = document.getElementById("projectName").value;

var nameError = document.getElementById("nameError");


var rollNumberError = document.getElementById("rollNumberError");
var departmentError = document.getElementById("departmentError");
var collegeNameError = document.getElementById("collegeNameError");
var emailError = document.getElementById("emailError");
var phoneNumberError = document.getElementById("phoneNumberError");
var teamSizeError = document.getElementById("teamSizeError");
var projectNameError = document.getElementById("projectNameError");

// Reset error messages


nameError.textContent = "";
rollNumberError.textContent = "";
departmentError.textContent = "";
collegeNameError.textContent = "";
emailError.textContent = "";
phoneNumberError.textContent = "";
teamSizeError.textContent = "";
projectNameError.textContent = "";

// Validation rules
var isValid = true;
if (name == "") {
nameError.textContent = "Name is required";
isValid = false;
}
if (rollNumber === "") {
rollNumberError.textContent = "Roll Number is required";
isValid = false;
}
if (department === "") {
departmentError.textContent = "Department is required";
isValid = false;
}
if (collegeName=== "") {
collegeNameError.textContent = "College Name is required";
isValid = false;
}
if (email == "") {
emailError.textContent = "Email is required";
isValid = false;
} else if (!isValidEmail(email)) {
emailError.textContent = "Invalid email format";
isValid = false;
}
if (phoneNumber == "") {
phoneNumberError.textContent = "Phone Number is required";
isValid = false;
} else if (!isValidPhoneNumber(phoneNumber)) {
phoneNumberError.textContent = "Invalid phone number format";
isValid = false;
}
if (teamSize == "" || parseInt(teamSize) < 1) {
teamSizeError.textContent = "Team Size must be a positive number";
isValid = false;
}
if (projectName == "") {
projectNameError.textContent = "Project Name is required";
isValid = false;
}

return isValid;
}

function isValidEmail(email) {
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}

function isValidPhoneNumber(phoneNumber) {
var phoneRegex = /^\d{10}$/;
return phoneRegex.test(phoneNumber);
}
</script>
</body>
</html>

You might also like