@surveyplanet/validator
v1.0.1
Published
Validate html forms.
Downloads
2
Readme
Validator
Validate HTML forms.
Install
npm install --save @surveyplanet/validator
Example
import Validator from '@surveyplanet/validator'
validator = new Validator(
[
{
name: "full-name",
rules: ["required", "alpha"],
},
{
name: "password",
rules: ["required", "minLength[8]"],
},
{
name: "password_confirm",
label: "password confirmation",
rules: ["required","matches[password]"],
},
{
name: "zip-code",
label: "Zip Code",
rules: "exactLength[5]",
message: "Hey! your %s has to be at exactly %s characters.",
}
{
name: "agree-checkbox",
rules: "required",
message: "You must agree to the terms of service.",
},
]
);
validator.showValidationErrors = true;
const errors = validator.validate();
if (errors.length) {
return alert(errors[0].message)
}
// process form...
Options
| Param | Type | Description |
| -------------- | ---------------- | ------------------------------------------------------------------------------------- |
| fields | Array.<Object>
| A collection of field inputs to validate. |
| fields.id | String
| The input id. |
| fields.name | String
| Then input name (required), |
| fields.label | String
| The input label used to parse error message (if not provided filed name is used). |
| fields.rules | String\|Array
| A single rule name or a list of rule names to use for validation default: 'required'. |
| fields.value | Array
| Input value (required if input name is not provided). |
| fields.message | String
| A custom message for the input use %s to parse input label and param respectively. |
Rules
| Name | Violation Message | Description |
| --------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| required
| "The %s field is required." | Must not be empty. |
| matches[String]
| "The %s field does not match the %s field." | Must match another field value. |
| url
| "The %s field must contain a valid url." | Must be a valid url. |
| email
| "The %s field must contain a valid email address." | Must be a valid email address. |
| emails
| "The %s field must contain all valid email addresses." | Must be a comma separated list of valid email addresses. |
| minLength[Number]
| "The %s field must be at least %s characters in length." | Must be at least X characters long. |
| maxLength[Number]
| "The %s field must not exceed %s characters in length." | Must be no longer than X characters. |
| exactLength[Number]
| "The %s field must be exactly %s characters in length." | Must be exactly X characters long. |
| greaterThan[Number]
| "The %s field must contain a number greater than %s." | Must be greater than X. |
| equals[Number]
| "The %s field must equal %s." | Must be equal to X. |
| lessThan[Number]
| "The %s field must contain a number less than %s." | Must be less than X. |
| alpha
| "The %s field must only contain alphabetical characters." | Must only contain alphabetical characters (A-z). |
| alphaNumeric
| "The %s field must only contain alpha-numeric characters." | Must only contain alpha-numeric characters (A-z, 0-9). |
| alphaDash
| "The %s field must only contain alpha-numeric characters, underscores, and dashes." | Must only contain alpha-numeric characters, underscores, or dashes |
| numeric
| "The %s field must only contain numbers." | Must be a whole number. |
| integer
| "%s must be a whole number." | Must be an integer. |
| decimal
| "The %s field must contain a decimal number." | Must be a valid decimal. |
| ip
| "The %s field must contain a valid IP address." | Must be a valid IP address. |
| base64
| "The %s field must contain a base64 string." | Must be a base64 string. |
| cvc
| "The %s field must contain a valid CVC." | Must be a valid credit card cvc. |
| creditCard
| "The %s field must contain a valid credit card number." | Must be a valid credit card number. |
| phone
| "The %s field must contain a valid phone number." | Must be a valid phone number. |
| fileType
| "The %s field must contain only %s files." | Must be a comma separated list of file types (e.g.: gif,png,jpg). |
| hasNumber
| "The %s field must contain at least one number." | Must contain a number. |
| hasUpper
| "The %s field must contain at least one upper case letter." | Must contain an upper case letter. |
| hasLower
| "The %s field must contain at least one lower case letter." | Must contain a lower case letter. |
| custom[Regex]
| "The %s field is invalid." | Must match a Regular Expression. |
Methods
validate()
Validates the form.
Returns: Array.<Object>
- A list of all validation errors.
createValidationErrorMessages(error)
Add a validation error messages to the dom.
| Param | Type | Description |
| ----- | -------- | -------------------------------------------- |
| error | Object
| A single error object from the errors array. |
removeAllValidationErrorMessages()
Removes all the validation error messages from the dom.
Properties
validator.errors
| Name | Type | Description |
| -------------- | ---------------- | ------------------------------- |
| errors | Array.<Object>
| A collection of errors. |
| errors.id | String
| The input id. |
| errors.name | String
| The input name |
| errors.class | String
| The input class |
| errors.message | String
| The error message |
| errors.rule | String
| The rule name that was violated |
Default: []
validator.showValidationErrors
| Name | Type | Description |
| -------------------- | --------- | ---------------------------------------------------------- |
| showValidationErrors | Boolean
| Whether or not the errors should be rendered into the dom. |
Default: false
validator.fields
| Name | Type | Description |
| ------ | ---------------- | ----------------------------------- |
| fields | Array.<Object>
| A collection of fields to validate. |
Default: []
Validator.RULES
| Name | Type | Description |
| ----- | ---------------- | ----------------------------- |
| RULES | Array.<Object>
| All the validation rule data. |
Testing
npm install
npm test