Example : A basic Form with EJS/HTML element validation in Node Js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
}
fieldset {
width: 35%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}
table {
width: 100%;
}
td {
padding: 5px;
}
</style>
</head>
<body>
<center>
<fieldset>
<h2>Registration Form</h2>
<form action="/submit" method="post" enctype="multipart/form-data" onsubmit="return validateDOB()">
<table>
<!-- 1. Full Name Validation : required, only letters and spaces, maximum length 100 -->
<tr>
<td>Full Name</td>
<td>:</td>
<td>
<input
type="text"
id="fullname2"
name="fullname1"
required
maxlength="100"
pattern="[A-Za-z\s]+"
title="Only letters and spaces allowed and of max 100 characters."
/>
</td>
</tr>
<!-- 2. Email Validation : required, HTML5 by default email validation -->
<tr>
<td>Email</td>
<td>:</td>
<td>
<input
type="email"
id="email2"
name="email1"
required
title="Enter a valid email (as e.g., [email protected])"
/>
</td>
</tr>
<!-- 3. Password Validation : required, minimum 8 characters, max 30 characters, must include at least one uppercase, lowercase, number and special char -->
<tr>
<td>Password</td>
<td>:</td>
<td>
<input
type="password"
id="password2"
name="password1"
required
minlength="8"
maxlength="30"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&]).{8,30}"
title="Password must be at least 8 characters and max 30 chars long and include one uppercase, lowercase, number, and special character (@$!%*#?&)."
/>
</td>
</tr>
<!-- 4. Date of Birth Validation : required, not a future date, DOB must be at least 18 years old.
The max attribute is set dynamically via JavaScript below. -->
<tr>
<td>Date of Birth</td>
<td>:</td>
<td>
<input
type="date"
id="dob2"
name="dob1"
required
title="Select your date of birth (You must be at least 18 years old)."
/>
</td>
</tr>
<!-- 5. Phone Validation : required, exactly 10 digits -->
<tr>
<td>Phone</td>
<td>:</td>
<td>
<input
type="tel"
id="phone2"
name="phone1"
required
pattern="\d{10}"
maxlength="10"
title="Enter a 10-digit phone number."
/>
</td>
</tr>
<!-- 6. Gender Validation : required and at least one radio button selected from group -->
<tr>
<td>Gender:</td>
<td>:</td>
<td>
<input type="radio" id="male" name="gender" value="Male" required />Male
<input type="radio" id="female" name="gender" value="Female" />Female
<input type="radio" id="other" name="gender" value="Other" />Other
</td>
</tr>
<!-- 7. Hobbies Validation : at least one checkbox selected.
(Using "required" on the first checkbox enforces at least one selection) -->
<tr>
<td>Hobbies</td>
<td>:</td>
<td>
<input type="checkbox" id="reading" name="hobbies" value="Reading" required />Reading
<input type="checkbox" id="traveling" name="hobbies" value="Traveling" />Traveling
<input type="checkbox" id="music" name="hobbies" value="Music" />Music
</td>
</tr>
<!-- 8. File Validation : required, accepts only image files. Note: HTML cannot enforce file size. -->
<tr>
<td>Upload Profile Photo</td>
<td>:</td>
<td>
<input
type="file"
id="profile2"
name="profile1"
accept=".jpg, .jpeg, .png, .gif"
required
title="Upload an image file (.jpg, .jpeg, .png, .gif)."
/>
</td>
</tr>
<!-- 9. Select (Country) Validation : required, user must select a non-default option -->
<tr>
<td>Country</td>
<td>:</td>
<td>
<select id="country2" name="country1" required>
<option value="" disabled selected>--Select--</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</td>
</tr>
<!-- 10. Textarea (Short Bio) Validation : optional with a maximum length of 500 characters -->
<tr>
<td>Short Bio</td>
<td>:</td>
<td>
<textarea id="bio2" name="bio1" rows="4" cols="30" maxlength="500" required
placeholder="Enter a short bio (max 500 characters)."></textarea>
</td>
</tr>
<!-- 11. Range (Experience) Validation : input type="range" between 0 and 30 -->
<tr>
<td>Experience (Years)</td>
<td>:</td>
<td>
<input type="range" id="range2" name="experience" min="0" max="30" value="0" />
</td>
</tr>
<!-- 12. URL Validation : required, valid URL format -->
<tr>
<td>Website</td>
<td>:</td>
<td>
<input
type="url"
id="website2"
name="website1"
required
title="Enter a valid URL (e.g., https://example.com)."
/>
</td>
</tr>
<!-- 13. Submit and Reset Buttons -->
<tr>
<td></td>
<td></td>
<td>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</form>
</fieldset>
</center>
<script>
// This script calculates the maximum acceptable date for the DOB field to ensure that
// the user is at least 18 years old.
window.onload = function ()
{
var today = new Date();
today.setFullYear(today.getFullYear() - 18);
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10)
{
dd = "0" + dd;
}
if (mm < 10)
{
mm = "0" + mm;
}
// Set max attribute for DOB so that the user is at least 18 years old.
document.getElementById("dob2").max = yyyy + "-" + mm + "-" + dd;
};
// Additional check (in case the browser doesn't honor the max attribute)
// to prevent submission if the DOB is later than allowed.
function validateDOB()
{
var dobField = document.getElementById("dob2");
var dob = new Date(dobField.value);
var maxDOB = new Date(dobField.max);
if (dob > maxDOB)
{
alert("You must be at least 18 years old.");
return false;
}
return true;
}
</script>
</body>
</html>
0 Comments