client side validations with async (client-server) support. http://www.pazams.com/vivalid/
npm install vivalidstateEnum.invalid or stateEnum.valid 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/
.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/
Data attribute | defined on | notes
-------------- | --------------| -----
data-vivalid-group | group | defines an input group. may be applied on (but not restricted to) 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.
Demo: https://embed.plnkr.co/Q6bTpj7PhqbQTBUZt166/
npm install vivalidnpm install vivalid-rules-corebower install vivalidbower install vivalid-rules-coregulp build