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