Data validation à la Laravel Validation
npm install quival
This library provides the ability to perform data validation easily in JavaScript. It is heavily based on Laravel Validation.
By sharing similar conventions, it is possible to reuse validation rules on both front and back ends. This library can be used for preliminary data validation on the front end, before submitting the data to Laravel-based app, where the data should be validated again.
Why is there a need to perform validation on the front end? Early data validation allows an app to show errors to users immediately, before the data is even submitted. Live feedback is beneficial and can improve user experience.
This library is intended to be used in the browser environment, and it was not tested in other enviroments such as Node.
- Provide similar conventions to Laravel Validation
- Implement most of the rules listed here
There are 2 ways to start using quival in your project.
- Use CDN link
- Import as a module
Get the script from jsDelivr CDN page and include it in your HTML page.
``html`
Extract Validator class from quival global variable, and you are good to go.
`js
const { Validator } = quival;
const validator = new Validator({ / data / }, { / rules / });
`
Install the package first via NPM.
`bash`
npm install quival
Import Validator class into your bundle, and you are good to go.
`js
import { Validator } from 'quival';
const validator = new Validator({ / data / }, { / rules / });
`
- Link dist version from CDN
- Import src version from CDN
- Form validation demo
The code snippet below demonstrates the usage of Validator class.
`js
import { Validator } from 'quival';
import enLocale from 'quival/src/locales/en.js';
// Set localization messages
Validator.setLocale('en');
Validator.setMessages('en', enLocale);
// Register custom checker
Validator.addChecker(
'phone_number',
(attribute, value, parameters) => !/[^0-9\+\-\s]/.test(value),
'The :attribute field must be a valid phone number.'
);
// Prepare arguments
const data = {
refcode: '1bc',
username: 'idea💡',
name: '',
email: 'test',
phone_number: 'test',
letters: ['a', 'b', 'B', 'a'],
items: {
x: 'a',
y: null,
z: 12,
},
payment_type: 'cc',
card_number: '',
};
const rules = {
refcode: [
'required',
function (attribute, value) { // Closure rule
return {
success: /^[a-z]/i.test(value),
message: 'The :attribute field must start with a letter.',
};
},
],
username: ['required', 'ascii', 'min:3'],
name: ['required', 'min:3'],
email: ['required', 'email'],
phone_number: ['required', 'phone_number', 'min:7'],
'letters.*': ['distinct:ignore_case'],
items: ['array', 'size:5'],
'items.*': ['required', 'string'],
payment_type: ['required', 'in:cc,paypal'],
cc_number: ['required_if:payment_type,cc'],
};
const customMessages = {
'items.size': 'The size of the array must be equal to :size items only.',
};
const customAttributes = {
cc_number: 'Credit Card Number',
};
const customValues = {
payment_type: {
cc: 'credit card',
},
};
// Create Validator instance
const validator = new Validator(data, rules, customMessages, customAttributes, customValues);
// Perform validation
validator
.validate()
.then((errorBag) => {
console.log(errorBag.messages());
});
`
The produced error messages for the code snippet above.
`json`
{
"refcode": [
"The refcode field must start with a letter."
],
"username": [
"The username field must only contain single-byte alphanumeric characters and symbols."
],
"name": [
"The name field is required."
],
"email": [
"The email field must be a valid email address."
],
"phone_number": [
"The phone number field must be a valid phone number.",
"The phone number field must be at least 7 characters."
],
"letters.0": [
"The letters.0 field has a duplicate value."
],
"letters.1": [
"The letters.1 field has a duplicate value."
],
"letters.2": [
"The letters.2 field has a duplicate value."
],
"letters.3": [
"The letters.3 field has a duplicate value."
],
"items": [
"The size of the array must be equal to 5 items only."
],
"items.y": [
"The items.y field is required."
],
"items.z": [
"The items.z field must be a string."
],
"cc_number": [
"The Credit Card Number field is required when payment type is credit card."
]
}
The following rules are not implemented and will always pass the validation if used.
- active_url
-
-
-
-
-
-
-
-
-
You can implement custom rules to override the dummy rules, by using Validator.addChecker().
If you discover any security related issues, please email
- Mohd Hafizuddin M Marzuki
- All Contributors
The MIT License (MIT). Please see License File for more information.