Introduction
HTML form validation ensures that the user provides the necessary and correctly formatted input before submitting the form. Using HTML5, you can perform client-side validation with minimal effort, enhancing the user experience and reducing server-side validation errors.
Built-In HTML Validation Attributes
required
The required attribute specifies that an input field must be filled out before submitting the form.
Example
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
pattern
The pattern attribute specifies a regular expression that the input field’s value must match for the form to be submitted.
Example
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
maxlength and minlength
The maxlength and minlength attributes specify the maximum and minimum number of characters allowed in an input field.
Example
<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="10" minlength="3" required>
min and max
The min and max attributes specify the minimum and maximum values for numeric input types.
Example
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100" required>
step
The step attribute specifies the legal number intervals for an input field.
Example
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" step="1" min="1" max="10" required>
type
Certain input types provide built-in validation based on their format, such as email, url, and tel.
Example
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
Example: Complete Form with Validation
Here is an example of a complete form that includes various validation attributes to demonstrate their use.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Validation</title>
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
}
label {
display: block;
margin-top: 10px;
}
input, select, textarea, button {
width: 100%;
padding: 10px;
margin-top: 5px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Form with Validation</h1>
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="10" minlength="3" placeholder="Enter your username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="6" placeholder="Enter your password" required>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100" required>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" required>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" step="1" min="1" max="10" required>
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://example.com" required>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
Explanation
<input type="text" required>: Ensures the name field is filled out.<input type="text" maxlength="10" minlength="3" required>: Ensures the username is between 3 and 10 characters long.<input type="email" required>: Ensures a valid email address is entered.<input type="password" minlength="6" required>: Ensures the password is at least 6 characters long.<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>: Ensures the phone number matches the specified pattern.<input type="number" min="1" max="100" required>: Ensures the age is within the specified range.<input type="date" required>: Ensures a date is selected.<input type="number" step="1" min="1" max="10" required>: Ensures the quantity is within the specified range and increments by 1.<input type="url" required>: Ensures a valid URL is entered.
Custom Validation Messages
You can customize the validation messages using the setCustomValidity method in JavaScript.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Custom Validation Messages</title>
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
}
label {
display: block;
margin-top: 10px;
}
input, select, textarea, button {
width: 100%;
padding: 10px;
margin-top: 5px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
<script>
function validateForm() {
var username = document.getElementById('username');
if (username.value.length < 3) {
username.setCustomValidity('Username must be at least 3 characters long');
} else {
username.setCustomValidity('');
}
}
</script>
</head>
<body>
<h1>Form with Custom Validation Messages</h1>
<form action="/submit-form" method="POST" onsubmit="validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="10" minlength="3" placeholder="Enter your username" required oninput="validateForm()">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
Explanation
onsubmit="validateForm()": Calls thevalidateFormfunction before submitting the form.oninput="validateForm()": Calls thevalidateFormfunction when the user types in the username field.username.setCustomValidity('Message'): Sets a custom validation message if the username is less than 3 characters long.
Conclusion
HTML form validation ensures that the user provides necessary and correctly formatted input before submitting the form. Using built-in validation attributes like required, pattern, maxlength, minlength, min, max, and type, you can enhance the user experience and reduce server-side validation errors. Custom validation messages can further improve the form’s usability. Understanding and implementing these validation techniques is crucial for building robust web forms.