Form Validator
install
npm install form-validatorjs
use
var FormValidator = require('form-validatorjs');
if not using browerify/webpack simply copy form-validator.js and form-validator.css.
See the examples in example
folder.
expected html
textarea
for the validator to work the add field-name
to the parent of input
fields, preferably the key you want to send to the server on successfull validation.
apply (Supports only input and textarea fields now)
var formValidator = field: optionals: 'last-name' validateAgainst: 'last-name': 'numberReg' regObj: numberReg: /^[0-9]*$/ invalidMsg: 'last-name': 'This is not a number' // error message to display if invalid ; ;
isValid
will be returned true
or false
depending upon validation.result
will contain key-value pair of fields.
Fields are validated onFocusout
and reset when focused
.
Options
field
- the wrapper element that contains all the inputs.optionals
- fields in this array wont be tracked for empty field. But validation rules can still be applied.validateAgainst
- specify the fields to be validated as key-value pairs, with key as thefield-name
and value as one of theregexTypes
fromregObj
.regObj
- specify theregexTypes
for validation.invalidMsg
- specify the 'error' message if invalid.
eg: if you want to validate email-val
field
validateAgainst : 'email-val': 'emailReg' // specifies to validate email-val against emailReg.regObj: emailReg: /some regex string/ // uses this string for email-val validation.invalidMsg: 'email-val': 'Invalid Email' // inserts this error message if invalid.
if the field is invalid,
Invalid Email.;
will be added inside the field='email-val'
div.
Css
Copy the css from form-validator.css
file for reference.
is-empty
- class is applied if the field is empty. Optionals wont be affected.is-valid
- class is applied if the field is non-empty and does not break any validation rules.
isSame and tooltip Options
isSame
// formValidator optionsisSame: 'pswd': 'pswd-again' 'message': 'Passwords not same' 'pri-addr': 'sec-addr''message': 'Address not same'
isSame option matches the first two fields (eg. pswd
and pswd-again
) and if they dont match inserts
Passwords not same;
inside the second field option div.
In the above case if the passwords dont match the div will be inserted inside the field-name=pswd-again
div.
toolTip
// formValidator optionstooltip: 'pswd': 'The password should be atleast 6 digit long.'
This will show a tooltip alongside pswd
field when you start typing.
For dynamic text inside tooltip, pass value as a function and return the message
to be displayed. eg.
{ var val = $nodelength; if val < 3 $tooltip; return 'Poor'; else if val < 6 $tooltip; return 'Ok'; else $tooltip; return 'Great'; } // formValidator optionstooltip: 'pswd': checkLength
Api
formValidator.empty() // empty all the fields