A lightweight, dependency-free JavaScript library for form validation with custom rules, dynamic error handling, and class toggling.
Powerful features that make form validation a breeze
Zero dependencies and minimal footprint for blazing-fast performance. No jQuery required.
Extensive set of built-in validation rules with support for custom error messages.
Custom CSS classes for valid and invalid states to match your design system.
Powerful date validation with custom format support and real date checking.
Clean API, intuitive configuration, and comprehensive documentation make implementation simple.
Works seamlessly across all modern browsers with no additional polyfills required.
Quick and easy implementation
// Using npm
// Just ownload the script and include it
<script src="path/to/zephyr-form-validator.min.js"></script>// Get the form element
const form = document.getElementById('myForm');
// Initialize the validator
const validator = new ZephyrFormValidator(form, {
fields: {
username: {
required: { value: true },
min: { value: 3 }
},
email: {
required: { value: true },
email: { value: true }
}
},
errorClass: "validation-error",
validationClasses: {
isInvalid: {
input: "is-invalid",
error: "invalid-feedback"
}
}
});
// Validate on form submission
form.addEventListener('submit', function(e) {
if (!validator.validate()) {
e.preventDefault();
}
});Comprehensive set of validation options
Ensures that a field contains a value and is not empty.
username: {
required: {
value: true,
message: "Username is required" // Optional custom message
}
}Validates the minimum and maximum character length for input fields.
password: {
min: {
value: 8,
message: "Password must be at least 8 characters" // Optional
},
max: {
value: 20,
message: "Password cannot exceed 20 characters" // Optional
}
}Validates that an input contains a properly formatted email address.
email: {
email: {
value: true,
message: "Please enter a valid email address" // Optional
}
}Validates that an input contains a properly formatted URL (http://, https://, www, etc.).
website: {
url: {
value: true,
pattern: /^(https?:\/\/|www\.)[a-zA-Z0-9-]+\.[a-zA-Z]{2,6}(\/[^\s]*)?$/, // Optional
message: "Please enter a valid URL" // Optional
}
}Ensures the input contains only alphabetic characters.
username: {
alpha: {
value: true,
message: "Username must contain only letters." // Optional
}
}Verifies the input contains only letters and numbers.
username: {
alphanumeric: {
value: true,
message: "Username must contain only letters and numbers." // Optional
}
}Validates input against a custom regular expression pattern.
phone: {
pattern: {
value: "^\\d{3}-\\d{3}-\\d{4}$",
message: "Please enter a valid phone number (e.g., 555-123-4567)" // Optional
}
}Ensures that a numeric input falls within a specific range.
age: {
range: {
min: 18,
max: 100,
message: "Age must be between 18 and 100" // Optional
}
}Validates dates with custom format support and actual date validation.
birthdate: {
date: {
format: "YYYY-MM-DD", // Supports YYYY, YY, MM, M, DD, D formats
message: "Please enter a valid date in YYYY-MM-DD format" // Optional
}
}Ensures that an input value matches the value of another field (useful for password confirmation).
confirmPassword: {
equalTo: {
field: "password", // ID or name of the target field
message: "Passwords must match" // Optional
}
}See ZephyrFormValidator in action
Get started with ZephyrFormValidator today.