univalid-strategy-form
Html Form Strategy for univalid module.
Extends univalid-strategy class
Install
univalid module, it is a core of validation, which manage different strategies.
You need also installnpm i univalidnpm i univalid-strategy-form
Base usage
.js
const univalid = ;const UnivalidStrategyForm = ; // Base initialize (set strategy) univalid; univalid;
.html
Username Lastname Email address
Setting data-validation in .html
Add to your html form elements (inputs, selects, textarea) 'data-validation=[type]'
In current time supports next types:
- required
- password
- equal - (equal password type)
Username
Setting your custom data-validation in .html / js
Do not forget that you have opportunity to set your custom validation handler.
Like this:
In .html
Username
In .js
//input the 'example'univalid;
Setting data-msg in .html
You are also can define message (empty, invalid, filter, success) for individual input
Add to your html form elements (inputs, selects, textarea) 'data-msg=[type]'
type:
- empty
- invalid - ValidationHandler error
- filter - Filter error (univalid-key-logger module)
- success
! data-msg must be a valid JSON type
Username
- Also see how to set and edit default 'msgConfig'
- Also see how to set common global 'msgConfig' for collections of forms
- Also see how to toggle form on common global 'msgConfig'
Setting data-f in .html
You can define filer`s handler for individual input
It Handled 'keyboard' events
Add to your html form elements (inputs, selects, textarea) 'data-f=[type]'
In current moment available patterns supporting types:
- oL - only latin symbols
- oC - only cyrillic symbols
- oN - only numbers
- oP - only numbers and latin symbols
Username
API
check(pack, core)
Validating the pack
pack - Type object
Structure of pack must be strict. Like that:
name, val, type - required fields
//name, val, type - required fields name: 'username' val: 'Uriy' type: 'required' filter: 'oL' msg: empty: 'You shall not pass' invalid: 'Validation error' filter: 'Filter error' success: 'All right' name: 'email' val: 'Uriy@mzf.com' type: 'email' { // Your custom filter console; // if FilterHandler is Ok then "return true" return true; // else "return false" } msg: empty: 'You shall not pass' invalid: 'Bad email' filter: 'Only lat/numbers/specials symbols' success: 'All right'
core - Type object
The instance of 'univalid' module
send(options)
Send form method
options - Type object
- Default sendConfig
option
options.newAjaxBody - Type object
New Ajax body config include:
- newAjaxBody.type - Type
string
- (if set 'method', that bind html attribute method) - newAjaxBody.url - Type
string
- (if set 'action', that bind html attribute action) - newAjaxBody.data - data of form
- newAjaxBody.notDisableSubmit - Type
boolean
options.cbSendSuccess - Type function
options.cbSendError - Type function
univalid;
core - Type object
The instance of 'univalid' module
setStatuses(pack)
Method of set custom statuses
pack - Type array
Each field of item of array must be strict named.
Item of pack must have three required field "name", "state", "msg".
univalid;
Example below shows how may to set statuses on inputs of form after get server validation result
univalid;
clearStatuses(pack)
Clear statuses of form and fields
pack - Type nodeList
Pack of html nodes inputs, selects, textareas
univalid; // or clear all statuses of form univalid;
clearInputs(inputs)
Clear input values
inputs - Type node or nodeList
May be one node or array of nodes
univalid;
addEvent(events)
Add new event in form
events - Type object
May be one event or object of events
univalid;
disable()
Disable all inputs, selects, textareas
univalid;
enable()
Enable all inputs, selects, textareas
univalid;
getValidationHandlers()
Get validation handlers.
By default defined in univalid-strategy abstract class
set(option, val)
Set the option in instance
option - Type string
univalid;
get(prop)
Get the prop
prop - Type string
univalid;
OPTIONS
core
Type object
! Required Prop
This is instance 'univalid' module
Must be define on init
$form
Type string
! Required Prop
Form selector
clsConfig
Type object
Default {error: 'error', success: 'success'}
ClassName config
passConfig
Type object
Default {min: 6, analysis: ['hasUppercase', 'hasLowercase', 'hasDigits', 'hasSpecials']
Password config
univalid;
statusConfig
Type object
Statuses config
univalid;
sendConfig
Type object
SendForm config
univalid;
keyLogger
Type boolean
On\off keyLogger filters
univalid;
checkPassScore
Type object
CheckPasswordScore config
univalid;
UNIVALID API
Do not forget that you are also may use all methods from API univalid module.
Several examples
// getCommonState - return common state ('success' or 'error')univalid;ifunivalidgetCommonState === 'success' univalid; // getState - return last state of validationunivalid;console; // clearState - clear last state of validationunivalid;console;univalid; // getStrategy - return current strategyconsole; // getValidHandler - return current validation handlersconsole;
EVENTS
You can subscribe on univalid or univalid-strategy-form events.
univalid;
Table of events
Event | Description |
---|---|
start:valid | Start validation pack |
end:valid | End validation pack |
start:valid:field | Start validation field |
end:valid:field | End validation field |
change:strategy | Change strategy event |
set:new-ValidationHandler | Set new ValidationHandler event |
change:msg-config | Change message config event |
clear:state | Clear state of last validation event |
e:submit | Submit form |
e:blur | Blur event on current input |
e:focus | Focus event on current input |
e:keyup | Keyup event on current input |
error | Error event |
clear:statuses | Clear statuses event |
send:form | Send form event |
clear:inputs | Clear inputs |
License
ISC ©