This library was created to address client side validations that needs also an AJAX server response to verify an input constraint.
Consider a case of a registration form where a user needs to fill out his personal details while also choosing a username.
For data integrity- all input constraints are validated on the server side upon data submission.
For user experience- it is also worthy to validate all input constraints on the client side as the user interacts with your application.
Some constraints, such as "existing user" or "valid location", need to be validated at the background, and this is where this library plays well. It is also especially useful for SPAs.
Consolidates Sync and Async validations
Sync rules return with
Async rules return with
stateEnum.pending, and also call a callback with
stateEnum.valid when ready. Callbacks from previous cycles get filtered out, which helps when AJAX responses are out of order from multiple parallel requests.
Full UI control
Either edit the UI through a CSS rule for
.vivalid-error-input classes , or gain complete control by passing a callback that will be called with a DOM element, validation message, and validation state.
JS api or data attributes interface
|Data attribute||defined on||notes|
|data-vivalid-group||group||defines an input group. may be applied on (but not restricted to)
|data-vivalid-on-validation||group||references success and failure callbacks.|
|data-vivalid-pending-ui||group||references start and stop pending ui callbacks. used only in groups which contain async validators.|
|data-vivalid-after-validation||group||references before and after validation callbacks. Defined on group level, but gets called on each input individually.|
|data-vivalid-tuples||input||an array of [validatorsNameOptionsTuple] (http://www.pazams.com/vivalid/documentation/-_internal.html#..validatorsNameOptionsTuple) in JSON format.|
|data-vivalid-blur-only||input||marks an input to be evaluated on
|data-vivalid-submit||button||triggers the group validation. Taking further action such as submitting a form, should be defined on the group's validation success callback.
|data-vivalid-reset||button||resets the state of the validation. this does not reset the form/group or clear its contents. This functionality, through the js api, is useful for SPA's.
Separation of validator rules
No validator rules are included. Choose to include common ones from https://github.com/pazams/vivalid-rules-core, or write your own.
Support for radio buttons and checkboxes
- save and include: https://cdn.rawgit.com/pazams/vivalid/0.2.0/dist/vivalid-bundle.min.js
- (optional) https://cdn.rawgit.com/pazams/vivalid-rules-core/master/dist/vivalid-rules-core-bundle.min.js
npm install vivalid
npm install vivalid-rules-core
bower install vivalid
bower install vivalid-rules-core
read this before attempting to