Presence Validation using required
Length Validation using maxlength and minlength
Numeric Validation type is number
Email Validation type is email
Password Strength Validation using pattern
Date Validation using type
Pattern Matching no dpecial symbol allowed only alphanumeric and digit
File Upload Validation using accept ,required
Custom Validation with JavaScript using oninput to check text length,datatype,email format,password length validation date format validation
Remote Validation (Asynchronous) using onblur
Group Validation: password length, password and confirmpassword equality(perform more than one valiation)
Conditional Validation(Clear/disable the value if checkbox is unchecked)
Range Validation: using min and max
Credit Card Validation using pattern
Phone Number Validation using pattern
URL Validation: using type
Regular Expression Validation
Dynamic Validation Messages(username is unique)
Date Range Validation onchange(End date must be after start date)
Form validation is crucial to ensure that the data submitted by users is accurate and meets the required criteria. Here's a checklist of common types of validation you might consider implementing in different forms, along with examples:
1. Presence Validation:
Objective: Ensure that required fields are not empty.
Example:
<input type="text" name="username" required>
2. Length Validation:
Objective: Ensure that input length falls within specified limits.
Example:
<input type="text" name="username" minlength="3" maxlength="20">
3. Numeric Validation:
Objective: Ensure that the input is a valid number.
Example:
<input type="number" name="age">
4. Email Validation:
Objective: Ensure that the input follows a valid email format.
Example:
<input type="email" name="email">
5. Password Strength Validation:
Objective: Ensure that passwords meet certain complexity criteria.
Example:
<input type="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
6. Date Validation:
date validation
Objective: Ensure that the input is a valid date.
Example:
<input type="date" name="birthdate">
7. Pattern Matching:
Objective: Ensure that the input matches a specified pattern.
Example:
<input type="text" name="customField" pattern="[A-Za-z0-9]+">
8. Checkbox/Radio Button Validation:
Objective: Ensure that at least one option is selected.
Example:
<input type="checkbox" name="terms" required>
9. File Upload Validation:
Objective: Ensure that the uploaded file meets certain criteria (e.g., file type, size).
Example:
<input type="file" name="file" accept=".pdf, .docx" required>
10. Custom Validation with JavaScript:
Objective: Implement custom logic using JavaScript for more complex validation scenarios.
Example:
<script>
function customValidation(value) {
// Your custom validation logic
return true; // or false
}
</script>
<input type="text" name="customField" oninput="if (!customValidation(this.value)) this.setCustomValidity('Invalid input.')">
<script>
function customValidation(value) {
// Check if the length is at least 5 characters
return value.length >= 5;
}
</script>
<input type="text" name="customField" oninput="if (!customValidation(this.value)) this.setCustomValidity('Please enter at least 5 characters.')">
Validating Numeric Input:
<script>
function customValidation(value) {
// Check if the input is a valid number
return !isNaN(parseFloat(value)) && isFinite(value);
}
</script>
<input type="text" name="customField" oninput="if (!customValidation(this.value)) this.setCustomValidity('Please enter a valid number.')">
This example checks if the input is a valid number. If not, it sets a custom validity message.
Validating Email Format:
<script>
function customValidation(value) {
// Check if the input follows a basic email format
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}
</script>
<input type="text" name="customField" oninput="if (!customValidation(this.value)) this.setCustomValidity('Please enter a valid email address.')">
This example checks if the input follows a basic email format using a regular expression.
Password Strength Validation:
<script>
function customValidation(value) {
// Check if the password has at least 8 characters and includes at least one uppercase letter, one lowercase letter, and one digit
return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(value);
}
</script>
<input type="password" name="customField" oninput="if (!customValidation(this.value)) this.setCustomValidity('Password must be at least 8 characters and include at least one uppercase letter, one lowercase letter, and one digit.')">
This example checks the strength of a password based on certain criteria.
Date Format Validation:
<script>
function customValidation(value) {
// Check if the input follows the MM/DD/YYYY date format
return /^\d{2}\/\d{2}\/\d{4}$/.test(value);
}
</script>
<input type="text" name="customField" oninput="if (!customValidation(this.value)) this.setCustomValidity('Please enter a date in the MM/DD/YYYY format.')">
This example checks if the input follows the MM/DD/YYYY date format.
11. Remote Validation (Asynchronous):
Objective: Validate input by making an asynchronous request to a server.
<input type="text" name="username" onblur="checkUsernameAvailability(this.value)">
<script>
function checkUsernameAvailability(username) {
// Make an asynchronous request to check availability
}
</script>
12. Group Validation:
Objective: Validate a group of related fields together.
Example:
<input type="password" name="password">
<input type="password" name="confirmPassword" oninput="validatePasswordMatch(this)">
<script>
function validatePasswordMatch(confirmPasswordInput) {
const passwordInput = document.querySelector('input[name="password"]');
const isMatch = confirmPasswordInput.value === passwordInput.value;
confirmPasswordInput.setCustomValidity(isMatch ? '' : 'Passwords do not match.');
}
</script>
Conditional Validation:
Objective: Validate fields based on the value of another field.
Example:
<input type="checkbox" name="subscribe" onchange="toggleEmailField(this)">
<input type="email" name="email" disabled required>
<script>
function toggleEmailField(checkbox) {
const emailInput = document.querySelector('input[name="email"]');
emailInput.disabled = !checkbox.checked;
if (!checkbox.checked) {
emailInput.value = ''; // Clear the value if checkbox is unchecked
}
}
</script>
- Range Validation: Objective: Ensure that numeric input falls within a specific range. Example:
<input type="number" name="quantity" min="1" max="100">
- Credit Card Validation: Objective: Validate credit card numbers. Example:
<input type="text" name="creditCard" pattern="\d{4}-\d{4}-\d{4}-\d{4}">
- Phone Number Validation: Objective: Validate phone numbers. Example:
<input type="tel" name="phoneNumber" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
- URL Validation: Objective: Validate URLs. Example:
<input type="url" name="website">
- Regular Expression Validation: Objective: Implement complex pattern matching using regular expressions. Example:
<input type="text" name="customField" pattern="[A-Za-z0-9]+">
- Dynamic Validation Messages: Objective: Display dynamic error messages based on validation criteria. Example:
<input type="text" name="username" oninput="validateUsername(this)">
<span id="usernameError" style="color: red;"></span>
<script>
function validateUsername(usernameInput) {
const usernameError = document.getElementById('usernameError');
// Your validation logic
if (/* validation fails */) {
usernameError.textContent = 'Username must be unique.';
} else {
usernameError.textContent = '';
}
}
</script>
- Multifield Validation: Objective: Validate multiple fields together as a group. Example:
<input type="password" name="password">
<input type="password" name="confirmPassword" oninput="validatePasswordMatch(this)">
<script>
function validatePasswordMatch(confirmPasswordInput) {
const passwordInput = document.querySelector('input[name="password"]');
const isMatch = confirmPasswordInput.value === passwordInput.value;
confirmPasswordInput.setCustomValidity(isMatch ? '' : 'Passwords do not match.');
}
</script>
- Date Range Validation: Objective: Ensure that a date falls within a specified range. Example:
<input type="date" name="startDate" onchange="validateDateRange(this)">
<input type="date" name="endDate" onchange="validateDateRange(this)">
<script>
function validateDateRange(dateInput) {
const startDate = new Date(document.querySelector('input[name="startDate"]').value);
const endDate = new Date(document.querySelector('input[name="endDate"]').value);
if (startDate > endDate) {
dateInput.setCustomValidity('End date must be after start date.');
} else {
dateInput.setCustomValidity('');
}
}
</script>
These examples cover a broad range of validation scenarios. Depending on the nature of your application, you may need to combine multiple types of validation for comprehensive form handling. Always consider the user experience, providing clear feedback on validation errors and guiding users towards correct input.
Top comments (0)