Best Practices
Client-Side Validations with HTML
Assignment 1: Basic Form
Validation
Objective:
Practice using basic HTML validation attributes like required, type, and maxlength.
Task:
1.
Create an HTML form with the following
fields:
o Name
(required and must be at least 3 characters long)
o Email
(required and must follow the proper email format)
o Phone
Number (required and must match a specific pattern for a
10-digit number)
o Age
(required and must be between 18 and 100)
o Message
(optional and should not exceed 300 characters)
Requirements:
- Use
the required attribute where applicable.
- Set
appropriate type for the email and number fields.
- Use
maxlength for the message field.
- Use
pattern to validate the phone number.
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required minlength="3">
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone"
name="phone" required pattern="\d{10}">
<label for="age">Age:</label>
<input type="number" id="age"
name="age" required min="18" max="100">
<label for="message">Message:</label>
<textarea id="message" name="message"
maxlength="300"></textarea>
<button type="submit">Submit</button>
</form>
Assignment 2: Date and
Time Validation
Objective:
Practice using the type="date" and type="time" fields with
the min and max attributes.
Task:
1.
Create a form for booking an appointment
with the following fields:
o Name
(required)
o Email
(required)
o Appointment
Date
(required, must be after today’s date)
o Appointment
Time
(required, must be between 9 AM and 6 PM)
Requirements:
- Use
type="date" for the appointment date and use the min attribute
to ensure it’s not in the past.
- Use
type="time" for the appointment time and limit it to working
hours (9 AM - 6 PM).
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label for="date">Appointment Date:</label>
<input type="date" id="date"
name="date" required min="<?php echo date('Y-m-d');
?>">
<label for="time">Appointment Time:</label>
<input type="time" id="time"
name="time" required min="09:00" max="18:00">
<button type="submit">Book Appointment</button>
</form>
Assignment 3: Password
Strength Validation
Objective:
Use the pattern attribute to create a strong password validation rule.
Task:
1.
Create a form for user registration with
the following fields:
o Username
(required, must be at least 5 characters)
o Password
(required, must be at least 8 characters long, contain at least one number, one
uppercase letter, and one special character)
o Confirm
Password (required, must match the password)
Requirements:
- Use
minlength to ensure the password is at least 8 characters long.
- Use
pattern to enforce a regular expression for a strong password.
- Use
required and maxlength for username and password fields.
- Ensure
that the "Confirm Password" field matches the password field.
<form action="#" method="post">
<label for="username">Username:</label>
<input type="text" id="username"
name="username" required minlength="5">
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required minlength="8" pattern="^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$">
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password"
name="confirm_password" required>
<button type="submit">Register</button>
</form>
Assignment 4: Custom
Validation with Pattern Attribute
Objective:
Use the pattern attribute to validate a custom input format (e.g., zip code,
credit card number).
Task:
1.
Create a form for users to enter their
shipping information with the following fields:
o Name
(required)
o Address
(required)
o Zip
Code
(required, must be a 5-digit US zip code)
o Credit
Card Number (required, must follow a valid credit
card number format)
Requirements:
- Use
pattern to validate the zip code and credit card fields.
- Make
sure the zip code matches the 5-digit pattern.
- Use
a pattern for credit card validation (credit card format with 16 digits,
allowing spaces or dashes between groups of four digits).
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required>
<label for="address">Address:</label>
<input type="text" id="address"
name="address" required>
<label for="zip">Zip Code:</label>
<input type="text" id="zip"
name="zip" required pattern="\d{5}" title="Enter a
valid 5-digit zip code">
<label for="credit_card">Credit Card Number:</label>
<input type="text" id="credit_card"
name="credit_card" required pattern="(\d{4}[- ]?){3}\d{4}" title="Enter
a valid credit card number with four groups of four digits">
<button type="submit">Submit</button>
</form>
Assignment 5: Form
Validation Using Custom Error Messages
Objective:
Learn to use the title attribute to display custom error messages.
Task:
1.
Create a feedback form with the following
fields:
o Name
(required)
o Email
(required)
o Message
(required, should not exceed 500 characters)
Requirements:
- Use
the required attribute for all fields.
- Use
the maxlength attribute for the message field.
- Display
custom error messages using the title attribute if validation fails.
<form action="#" method="post">
<label for="name">Name:</label>
<input
type="text" id="name" name="name" required title="Name
is required and cannot be left blank">
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required title="Please enter a valid email
address">
<label for="message">Message:</label>
<textarea id="message" name="message"
required maxlength="500" title="Message cannot exceed 500
characters"></textarea>
<button type="submit">Submit</button>
</form>
Assignment 6: Validate
Multiple Choices
Objective:
Practice validating a checkbox group (for agreements or preferences).
Task:
1.
Create a form for user registration that
includes the following fields:
o Username
(required)
o Password
(required)
o Agreement
to Terms (required, user must check a box to agree)
Requirements:
- Ensure
the user cannot submit the form unless they check the "I agree"
checkbox.
- Use
the required attribute to enforce checking the checkbox.
<form action="#" method="post">
<label for="username">Username:</label>
<input type="text" id="username"
name="username" required>
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required>
<label for="agree">I agree to the terms and conditions:</label>
<input type="checkbox" id="agree"
name="agree" required>
<button type="submit">Register</button>
</form>
Assignment 7: Email Validation with Custom Domain
Objective:
Practice validating email addresses using the pattern attribute to enforce
specific domains.
Task:
1.
Create a registration form with the
following fields:
o Full
Name
(required)
o Email (required,
must be a valid email, and only email addresses from example.com domain are
allowed)
o Password
(required, must be at least 8 characters long)
o Confirm
Password (required, must match the password)
Requirements:
- Use
the required attribute for name, email, and password fields.
- Use
a pattern for the email field to allow only @example.com emails.
- Ensure
the password and confirm password fields match.
<form action="#" method="post">
<label for="name">Full
Name:</label>
<input type="text" id="name"
name="name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required pattern="[a-zA-Z0-9._%+-]+@example\.com$"
title="Email must be from example.com domain">
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required minlength="8">
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password"
name="confirm_password" required>
<button type="submit">Register</button>
</form>
Assignment 8: File Upload
Validation
Objective:
Practice validating file uploads using accept and required.
Task:
1.
Create a form for uploading a profile
picture with the following fields:
o Name
(required)
o Profile
Picture (required, must be an image file, e.g., JPEG, PNG)
o About
Me
(optional, text area with a maximum of 200 characters)
Requirements:
- Use
accept to limit the file upload to image formats (.jpg, .png, .jpeg).
- Use
required for the name and profile picture fields.
- Limit
the About Me text area to 200 characters using maxlength.
<form action="#" method="post" enctype="multipart/form-data">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="file">Profile
Picture:</label>
<input type="file" id="file"
name="file" required accept="image/jpeg, image/png,
image/jpg">
<label for="about_me">About Me:</label>
<textarea id="about_me" name="about_me"
maxlength="200"></textarea>
<button type="submit">Upload</button>
</form>
Assignment 9: Drop-Down
Selection Validation
Objective:
Practice using select elements and ensure that the user selects a valid option.
Task:
1.
Create a form for selecting a product
category for an online store with the following fields:
o Name
(required)
o Email
(required, must be a valid email)
o Category
(required, user must select a category from a dropdown list)
o Message
(optional)
Requirements:
- Use
the required attribute for the name, email, and category fields.
- Ensure
the category field is selected from the dropdown and not left at the
default option (e.g., Please select a category).
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label for="category">Product Category:</label>
<select id="category" name="category"
required>
<option value="">Please
select a category</option>
<option value="electronics">Electronics</option>
<option value="fashion">Fashion</option>
<option value="home">Home</option>
</select>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
Assignment 10: Range
Validation
Objective:
Practice using the type="range" and min, max, and step attributes for
validating numeric ranges.
Task:
1.
Create a form for gathering user feedback
with the following fields:
o Age
(required, must be between 18 and 100)
o Rating
(required, range from 1 to 5)
o Message
(optional)
Requirements:
- Use
type="range" for the rating field.
- Set
a valid age range using the min and max attributes.
- Ensure
the rating value is between 1 and 5.
<form action="#" method="post">
<label for="age">Age:</label>
<input type="number" id="age"
name="age" required min="18" max="100">
<label for="rating">Rating (1-5):</label>
<input type="range" id="rating"
name="rating" required min="1" max="5" step="1">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
Assignment 11: Phone
Number Validation with Country Code
Objective:
Practice validating phone numbers with a custom pattern.
Task:
1.
Create a form for user registration with
the following fields:
o Full
Name
(required)
o Email
(required, must be a valid email)
o Phone
Number (required, must include country code)
o Password
(required, at least 8 characters)
Requirements:
- Use
pattern to validate the phone number with the format +<country_code>
<phone_number>, e.g., +1 1234567890.
- Use
type="email" for the email validation.
- Use
minlength for password validation.
<form action="#" method="post">
<label for="name">Full
Name:</label>
<input type="text" id="name"
name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone
Number:</label>
<input type="tel" id="phone"
name="phone" required pattern="\+[0-9]{1,3}\s[0-9]{10}" title="Phone
number must include country code (e.g., +1 1234567890)">
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required minlength="8">
<button type="submit">Register</button>
</form>
Assignment 12: Time Range
Validation
Objective:
Practice validating time inputs with a custom range.
Task:
1.
Create a form for booking a meeting with
the following fields:
o Name
(required)
o Email (required,
must be a valid email)
o Meeting
Date
(required, must be a future date)
o Meeting
Time
(required, must be between 9 AM and 5 PM)
Requirements:
- Use
type="date" for selecting a meeting date and ensure it is a
future date using min.
- Use
type="time" for selecting the meeting time and ensure it is
within the range of 9 AM to 5 PM.
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label for="meeting_date">Meeting
Date:</label>
<input type="date" id="meeting_date"
name="meeting_date" required min="<?php echo date('Y-m-d',
strtotime('tomorrow')); ?>">
<label for="meeting_time">Meeting Time:</label>
<input type="time" id="meeting_time"
name="meeting_time" required min="09:00" max="17:00">
<button type="submit">Book
Meeting</button>
</form>
Assignment 13: Multiple
Checkbox Validation
Objective:
Practice validating multiple checkboxes where at least one must be selected.
Task:
1.
Create a form for choosing a subscription
plan with the following fields:
o Name
(required)
o Email
(required)
o Select
Your Interests (required, at least one checkbox must be
selected)
Requirements:
- Use
multiple checkboxes for selecting interests.
- Ensure
the form can’t be submitted unless at least one checkbox is checked.
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label>Select Your Interests:</label>
<input type="checkbox" name="interests"
value="technology"> Technology
<input type="checkbox" name="interests"
value="science"> Science
<input type="checkbox" name="interests"
value="art"> Art
<button type="submit">Submit</button>
</form>
Assignment 14: Date of Birth Validation
Objective:
Practice validating a user's date of birth to ensure they are over a certain
age (e.g., 18).
Task:
1.
Create a registration form with the
following fields:
o Name
(required)
o Email
(required, must be a valid email)
o Date
of Birth (required, must be at least 18 years old)
o Password
(required, must be at least 8 characters long)
Requirements:
- Use
type="date" for the date of birth.
- Implement
validation to ensure the user is at least 18 years old by setting the max
attribute for the date field dynamically (using PHP or JavaScript).
<form action="#" method="post">
<label for="name">Name:</label>
<input
type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label for="dob">Date of
Birth:</label>
<input type="date" id="dob"
name="dob" required max="2006-11-21">
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required minlength="8">
<button type="submit">Register</button>
</form>
Assignment 15: Password
Strength Validation
Objective:
Practice validating a password with specific criteria (uppercase, lowercase,
number, special character).
Task:
1.
Create a password validation form with the
following fields:
o Email
(required)
o Password
(required, must include at least one uppercase letter, one lowercase letter,
one number, and one special character)
o Confirm
Password (required, must match the password)
Requirements:
- Use
the pattern attribute for the password field to ensure the password meets
the required conditions.
- Ensure
the confirm password field matches the password.
html
Copy code
<form action="#"
method="post">
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d@$!%*?&]{8,}$"
title="Password must contain at least one uppercase letter, one lowercase
letter, one number, and one special character">
<label for="confirm_password">Confirm
Password:</label>
<input type="password" id="confirm_password"
name="confirm_password" required>
<button type="submit">Register</button>
</form>
Assignment 16: Age Range
Validation
Objective:
Practice validating the age field with a range of values.
Task:
1.
Create a form for user feedback with the
following fields:
o Name
(required)
o Age
(required, must be between 18 and 60)
o Feedback
(optional, text area)
Requirements:
- Use
type="number" for the age field with a minimum of 18 and a
maximum of 60.
html
Copy code
<form action="#"
method="post">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required>
<label for="age">Age:</label>
<input type="number" id="age"
name="age" required min="18" max="60">
<label for="feedback">Feedback:</label>
<textarea id="feedback" name="feedback"></textarea>
<button type="submit">Submit</button>
</form>
Assignment 17: Phone
Number Format Validation
Objective:
Practice validating a phone number using the pattern attribute.
Task:
1.
Create a form for a user profile with the
following fields:
o Full
Name
(required)
o Email
(required, must be a valid email)
o Phone
Number (required, must be in the format of +CountryCode
PhoneNumber, e.g., +1 1234567890)
o Message
(optional)
Requirements:
- Use
the pattern attribute to validate the phone number format (e.g., +1
1234567890).
html
Copy code
<form action="#"
method="post">
<label for="name">Full
Name:</label>
<input type="text" id="name"
name="name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label for="phone">Phone
Number:</label>
<input type="tel" id="phone"
name="phone" required pattern="^\+[0-9]{1,3}\s[0-9]{10}$" title="Phone
number must be in the format: +<CountryCode> <PhoneNumber> (e.g.,
+1 1234567890)">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
Assignment 18: Multiple
File Upload Validation
Objective:
Practice validating multiple file uploads with specific file types and size
constraints.
Task:
1.
Create a form for uploading documents with
the following fields:
o Name
(required)
o Email
(required)
o Files
(required, accept only .pdf, .docx, .jpg, and each file must not exceed 2MB)
Requirements:
- Use
the accept attribute to specify valid file types (.pdf, .docx, .jpg).
- Use
JavaScript to validate file size and ensure no file exceeds 2MB before
submission.
html
Copy code
<form action="#"
method="post" enctype="multipart/form-data">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label for="files">Upload
Files:</label>
<input type="file" id="files"
name="files[]" accept=".pdf,.docx,.jpg" multiple required>
<button type="submit">Upload</button>
</form>
<script>
document.querySelector('form').onsubmit = function()
{
const files = document.getElementById('files').files;
for (let i = 0; i < files.length;
i++) {
if (files[i].size > 2097152)
{ // 2MB in bytes
alert('Each file must be under
2MB.');
return false;
}
}
};
</script>
Assignment 19: Time Range
Validation
Objective:
Practice validating time inputs and ensuring they are within a specific range.
Task:
1.
Create a form for booking an appointment
with the following fields:
o Name
(required)
o Email
(required)
o Appointment
Date
(required)
o Appointment
Time
(required, must be between 9 AM and 6 PM)
Requirements:
- Use
type="time" for the time input and set a valid time range from 09:00
to 18:00.
html
Copy code
<form action="#"
method="post">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label for="appointment_date">Appointment
Date:</label>
<input type="date" id="appointment_date"
name="appointment_date" required>
<label for="appointment_time">Appointment
Time:</label>
<input type="time" id="appointment_time"
name="appointment_time" required min="09:00" max="18:00">
<button type="submit">Book
Appointment</button>
</form>
Assignment 20: Checkbox
Validation with "Select All" Option
Objective:
Practice validating multiple checkboxes, including a "Select All"
option.
Task:
1.
Create a form for a newsletter
subscription with the following fields:
o Name
(required)
o Email
(required)
o Interests
(checkboxes for various categories, at least one must be selected)
o Select
All Interests (checkbox to select all, if checked, all
interests should be selected)
Requirements:
- Use
checkboxes for selecting interests.
- Ensure
that the user must select at least one interest or use the "Select
All" option.
- Implement
a "Select All" checkbox that selects all other checkboxes when
checked.
html
Copy code
<form action="#"
method="post">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
<label>Select Your Interests:</label>
<input type="checkbox" id="select_all"
onclick="toggleAll(this)">
<label for="select_all">Select
All</label><br>
<input type="checkbox" name="interests"
value="technology"> Technology
<input type="checkbox" name="interests"
value="science"> Science
<input type="checkbox" name="interests"
value="art"> Art
<button type="submit">Subscribe</button>
</form>
<script>
function toggleAll(source) {
let checkboxes = document.querySelectorAll('input[name="interests"]');
checkboxes.forEach(checkbox =>
checkbox.checked = source.checked);
}
</script>
These assignments provide
diverse practice on various HTML validation techniques, from date and password
validation to handling file uploads and time range checks.