Form Validator

A plugin to validate form fields.

How to

The form validator plugin is used to validate fields in a form.

Use the FormValidator object to initialize your form validation:

var form = document.getElementById('form-1');
var formValidate = new FormValidator({
  element: form,
  customValidate: {
    // custom validation functions here
  }
});

Then use the validate method to validate your form (e.g., when the form is submitted):

form.addEventListener('submit', function(event){
  event.preventDefault();
  formValidate.validate(function(errorFields){
    // errorFields: array of fields where an error was found
  });
});

⚠️ Note: in the form-validator.js, we do not initialize the FormValidator object. You would need to initialize it (as shown in the above code snippets) for it to work properly.

Options #

The form validator plugin comes with a list of options you can use to customize the validation behavior.

inputErrorClass #

The class added to the input element if an error was found. Default value is 'form-control--error'.

var formValidate = new FormValidator({
  element: form,
  inputErrorClass: 'form-control--error'
});

inputWrapperErrorClass #

If the input element has an ancestor with a class of '.js-form-validate__input-wrapper', then the inputWrapperErrorClass is added to this ancestor if an error was found during the validation.
This can be used, for example, to reveal an error message. Default value is '.form-validate__input-wrapper--error'.

var formValidate = new FormValidator({
  element: form,
  inputWrapperErrorClass: 'form-validate__input-wrapper--error'
});

customValidate #

Use this option to pass a list of custom validation functions; for example, if you need to check if a field value includes a number, you can define the custom hasNumber function:

var formValidate = new FormValidator({
  element: form,
  customValidate: {
    hasNumber: function(input, cb) {
      // input -> field to check
      // cb -> callback function; return false if there was an error when validating the field
      cb(/\d/.test(input.value)); // return false if input.value does not include a number
    }
  }
});

To use this function on a field element, add a data-validate attribute equal to that function name:

<input type="password" name="password" id="password" required data-validate="hasNumber">

Aside from your custom functions, you can use the standard input attributes (like required or minlength).

<input type="email" name="email" id="email" required>

Note: when using the standard input attributes, HTML Form validation will be automatically performed. To deactivate it (and rely only on the Form Validator plugin) add the novalidate attribute to the form element.

Categories

• Forms > Plugins
• Plugins > Misc

Bug report & feedback

Component Github page ↗