instant-validation
- quick setup
- framework agnostic
- zero dependencies
- tiny bundle size
Size: ~4k, ~1.5k gzip’d
Why to use:
- All the validation state management of your form is under the hood.
- Incapsulation of all logic related to validation, you should only call needed method and library will care about details
- Easy integration
$ npm i instant-validation
A simple validator creation example
; const validator = name: !!value message: 'Please enter your name' ;
Rules
Each rule is a function and it should return true
for a valid case and false
for invalid.
Each field should contain an array with minimum 1 rule
You can import ready to use rules
;
Right now there are only two rules - requiredRule
and lengthRule
but we are going to add some other useful rules in future releases.
React Form example
Here is the example of a simple React form for creating an account
;;;; const validator = name: rule: requiredRule message: 'Please enter your name' rule: message: 'Your name should be at least 2 characters' email: rule: requiredRule message: 'Please enter an email' rule: emailRule message: 'Please enter a valid email' password: rule: requiredRule message: 'Please enter password' repeatPassword: rule: requiredRule message: 'Please repeat password' // passwrodOriginal will appear here trough the insertArgs method value === passwrodOriginal message: 'Passwords are not equal' ruleId: 'passwordEqual' ; Component { super; thisonChange = thisonChange; thisonSubmit = thisonSubmit; thisstate = name: '' email: '' password: '' passwordRepeat: '' ; } { this; } { const email password passwordRepeat = thisstate; const errors = validator // if you have some rules with many arguments, you can pass those arguments like this ; return <form> <input name="name" value=name onChange=thisonChange /> <div className="error">errorsname</div> <input name="email" value=email onChange=thisonChange /> <div className="error">errorsemail</div> <input name="password" value=password onChange=thisonChange /> <div className="error">errorspassword</div> <input name="passwordRepeat" value=passwordRepeat onChange=thisonChange /> <div className="error">errorspasswordRepeat</div> <button onClick=thisonSubmit type="submit" disabled=!validator > Enter </button> </form> ; } ;
Api
validate({ fieldsState })
Get errors
object with errormessages using validate method. You should call this method each time, when you have updates in your field values.
Validator will apply and recalculate rules only for fields, that were changed.
const errors = validator;
If you need a detailed information for each field, you can get fields
object
const errors fields = validator;
Each field contains information
- showError: boolean (should it show the error message)
- statuses: boolean
- touched: boolean (if this field has changed a value ever)
- valid: boolean (if this field is valid)
- value: any (original value of the field)
isFormValid()
Just returns a boolean status of the whole form.
showAllErrors(show = true)
You can use this method, if you want to show all the untouched field errors. (For exmaple, if your submit-button is always enabled.)
To reset error higlighting to initial state (all error messages are hidden by default), you can invoke showAllErrors(false)
.
Please, don't forget to manually re-render your form, after calling this method.
Here an example for React.js
// submit button callback { validator; this; // update component state, to invoke re-render if !validator return; // do no send invalid form thisprops;};
insertArgs({ [ruleId]: [...additionalArguments] })
Some of the rules can be related to other fields.
This means that you should have more than 1 argument in the rule.
You can provide additional argument to such rules using this method.
Don't forget to name the rule with ruleId
for that
value > otherFieldValue message: 'Field should be greater than another' ruleId: 'greaterRule'
const errors = validator ;