vivalid

ViValid

Overview

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.

Main features

Consolidates Sync and Async validations

Sync rules return with stateEnum.invalid or stateEnum.valid
Async rules return with stateEnum.pending, and also call a callback with stateEnum.invalid or stateEnum.valid when ready. Callbacks from previous cycles get filtered out, which helps when AJAX responses are out of order from multiple parallel requests.

Demo: https://embed.plnkr.co/daGXkk1RrdRxjFWhQgwX/

Full UI control

Either edit the UI through a CSS rule for .vivalid-error and .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.

Demo: https://embed.plnkr.co/JsA852mcYTTUHPoUf3F1/

JS api or data attributes interface

Use this library with full javascript api, or the data attributes html interface (with js to only define callbacks).

Data attribute	defined on	notes
data-vivalid-group	group	defines an input group. may be applied on (but not restricted to) <form> elements. the value may used with htmlInterface api in resetGroup.
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 blur event only, as opposed to default way: first evaluated on blur event, and after one event, evaluate on input event.
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. preventDefault() is applied to the DOM event.
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. preventDefault() is applied to the DOM event.

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.

Demo: https://embed.plnkr.co/Q6bTpj7PhqbQTBUZt166/

Support for radio buttons and checkboxes

Demo: https://embed.plnkr.co/xtxe1YfsmxRR9hacZ3sn/

Installation

Manual:

• 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/0.2.0/dist/vivalid-rules-core-bundle.min.js

npm:

• npm install vivalid
• (optional) npm install vivalid-rules-core

bower:

• bower install vivalid
• (optional) bower install vivalid-rules-core

Contributors

read this before attempting to gulp build