Scribd
Upload
11 views

Lab3 Form Validation

js form validation code

Uploaded by

Sruthi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

Lab3 Form Validation

js form validation code

Uploaded by

Sruthi
Copyright
© © All Rights Reserved
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