Scribd
Upload
10 views5 pages

Assignment 4 WD Shruti

This document contains an HTML and JavaScript code for an event registration form created by Shruti, a B.Tech CSE(AI) student. The form includes fields for name, email, phone number, age, gender, and event type, with validation checks implemented in JavaScript to ensure all fields are correctly filled before submission. Error messages are displayed for invalid inputs, and a confirmation alert is shown upon successful registration.

Uploaded by

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

Assignment 4 WD Shruti

This document contains an HTML and JavaScript code for an event registration form created by Shruti, a B.Tech CSE(AI) student. The form includes fields for name, email, phone number, age, gender, and event type, with validation checks implemented in JavaScript to ensure all fields are correctly filled before submission. Error messages are displayed for invalid inputs, and a confirmation alert is shown upon successful registration.

Uploaded by

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

Assigmnent-4

Web development
Name- Shruti
B.Tech CSE(AI)
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Registration Form</title>
<style>
.error { color: red; }
</style>
</head>
<body>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name">
<span id="nameError" class="error"></span><br>

<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">
<span id="emailError" class="error"></span><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" placeholder="Enter your phone number">
<span id="phoneError" class="error"></span><br>

<label for="age">Age:</label>
<input type="number" id="age" placeholder="Enter your age">
<span id="ageError" class="error"></span><br>

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female
<span id="genderError" class="error"></span><br>

<label for="eventType">Event Type:</label>


<select id="eventType">
<option value="conference">Conference</option>
<option value="workshop">Workshop</option>
<option value="webinar">Webinar</option>
</select><br>

<button type="submit">Submit</button>
</form>

<script src="validation.js"></script>
</body>
</html>
JAVASCRIPT CODE
document.getElementById('registrationForm').addEventListener('submit',
function(event) { event.preventDefault(); validateForm();
});

function validateForm() {
let isValid = true;

// Name validation
const name = document.getElementById('name').value;
if (name === '') { isValid = false;
document.getElementById('nameError').innerText = 'Name is required';
} else {
document.getElementById('nameError').innerText = '';
}

// Email validation
const email = document.getElementById('email').value;

if (!emailPattern.test(email)) {
isValid = false;
document.getElementById('emailError').innerText = 'Invalid email address';
} else {
document.getElementById('emailError').innerText = '';
}
// Phone number validation
const phone = document.getElementById('phone').value;

if (!phonePattern.test(phone)) {
isValid = false;
document.getElementById('phoneError').innerText = 'Phone number must
be 10 digits';
} else {
document.getElementById('phoneError').innerText = '';
}

// Age validation
const age = document.getElementById('age').value;
if (age < 18) { isValid = false;
document.getElementById('ageError').innerText = 'You must be at least 18
years old';
} else {
document.getElementById('ageError').innerText = '';
}

// Gender validation
const gender = document.querySelector('input[name="gender"]:checked');
if (!gender) { isValid = false;

document.getElementById('genderError').innerText = 'Please select your


gender';
} else {
document.getElementById('genderError').innerText = '';
}

if (isValid) {
alert('Thank you for registering!');
}
}

You might also like