form-data-validator

A helper for working with the HTML5 constraint validation API. Providing some tools to easily extend or override native html5 form validation.

Installation

Form Data Validator supports npm
``
npm install form-data-validator
`

Usage

`
import FormDataValidator from 'form-data-validator';
`

Set up your form according to the constraint validation api attributes. Then run your form through the validator.

The easiest way to do that for your forms is to parse your entire page and run each form through the validator. Form Data Validator has a built in function that does this for you.

`
FormDataValidator.validateAllForms('.js-validate', { / options / }); // defaults to 'form'
`

Alternatively you validate your own form.

`
FormDataValidator.validateForm('.js-validate', { / options / });
`

Methods

Method | Description
--- | ---
`FormDataValidator.validateForm(form, config)` | `form` can be a selector string or an element
`FormDataValidator.validateAllForms(forms, config)` | `forms` can be a selector string or an element
`isValid()` | Returns `true` or `false`
`getErrors()` | Returns an array containing the `id` of the bad input and a object representing the validityErrors.

Options

Option | Value
--- | ---
`scrollToFirstError` | Default value: `true`
`parentSelector` | Default value: `'div'`
`errorClass` | Default value: `'error'`
`ignoreFields` | Default value: `'[]'`

Pass an array of strings representing the `name` attribute of the field you don't want to validate
`customTypes` | Default value: `[]`

Pass an array of objects with a `type`, `rule` and optional `message` property. See example
`rules` | Default value: `[]`

Pass an array of objects with a `type`, `rule` and optional `message` property. See example
`customValidityMessages` | Default value: `[]`

Pass an array of objects with a `error` and `message` property. The `error`

Examples

$3

You can override the built-in html5 validation rules for input types. This can come in handy to provide a better email validation. By default
email@email will validate because this is a valid email address format. You could implement your own email regular expression to override this. I reccomend the excellen validator.js library.

`
import isEmail from 'validator/lib/isEmail';

FormDataValidator.validateForm('form', {
customTypes: [{
type: 'email',
rule: field => isEmail(field.value)
}]
});
`

This can also be used to provide a regular expression for password input fields, or a specific kind of url input type validation.

$3

Add extra validation rules. These rules are mapped to your field's id. A few use cases for this would be a password field that must match a password repeat field. For this example to work make sure your password input type has a data-equal-to attribute:

`
import equals from 'validator/lib/equals';

const form = document.querySelector('form');
FormDataValidator.validateForm(form, {
rules: [{
field: '#password',
rule: field =>
equals(field.value, form.querySelector(field.dataset.equalTo).value)
}]
});
`

Another use case would be validating a chekcbox group where there has to be at least 1 checked input:

`
const form = document.querySelector('form');
FormDataValidator.validateForm(form, {
rules: [{
field: '[type="checkbox"]',
rule: (field) => {
const checked = [...form.querySelectorAll('[type="checkbox"]')]
.find(checkbox => checkbox.checked);
if (typeof checked !== 'undefined) return true;
return false;
}
}]
});
`

$3

Useful for overriding the default browser validity messages. The `error` property is a string that must match one of the `ValidityState` properties.

`
const form = document.querySelector('form');
FormDataValidator.validateForm(form, {
customValidityMessages: [{
error: 'valueMissing',
message: 'Hold on! This field needs to be filled in'
}]
});
``