Skip to content

A helper for working with the HTML5 constraint validation API

License

Notifications You must be signed in to change notification settings

stenvdb/form-data-validator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

customTypes example

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.

rules example

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;
    }
  }]
});

customValidityMessages example

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'
  }]
});

About

A helper for working with the HTML5 constraint validation API

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published