html-form-validation

Validator

This module is to validate HTML forms. Text fields, emails, phones, checkobxes etc. Check out demo.

Overview

• Installation
• Usage
  • Markup
  • Initialization
  • Initialization with webpack
• Options (html)
  • Form fields
  • Field types
• Options (js)
• Methods
  • Instance method
  • Static methods
• TODO
• Requirement
• Versioning

Installation

Install validator module

npm i -S html-form-validation

or with yarn

yarn add html-form-validation

Add validator to your project

AMD

require(['html-form-validation'], function (Validator) {});

CommonJS

var Validator = require('html-form-validation');

ES6

import Validator from 'html-form-validation';

Inline

<script src="html-form-validation.js"></script>

Also, include CSS file

<link href="validator.css" rel="stylesheet">

Usage

Markup

Validator module needs proper HTML-markup (more in example section)

<form>
  <!-- Email field -->
  <label class="form-input" data-validation="required" data-validation-type="email">
    <input type="email">
    <div class="error"></div>
  </label>
 
  <!-- Text field. With min and max length -->
  <label class="form-input" data-validation="required" data-validation-type="text">
    <textarea data-validation-condition="length" data-min-length="50" data-max-length="200"></textarea>
    <div class="error"></div>
  </label>
 
  <!-- Text field. With custom error message, 'equal' codition -->
  <label class="form-input" data-validation="required" data-validation-type="text" data-validation-text="Incorrect data">
    <input type="text" data-validation-condition="equal" data-equal="dataToCompare">
    <div class="error"></div>
  </label>
 
  <!-- Validate form button -->
  <button class="validate-form-button" type="submit">Validate form</button>
</form>

Default initialization

// initialize
$('form').validator();
 
// initialize with options
$('form').validator({
  removeErrorOnFocusOut: true
});

Initialization with webpack

// import validator
import Validator from 'html-form-validation';
 
// fix jQuery conflict
Validator.expose($);
 
// use it
$('form').validator();

Options (html)

Form fields

Option name	Possible values	Description
data-validation	required / false	Validates the field when set to true.
data-validation-type	text / phone / email / checkbox / radio / select	Which method used to validate field. Each type has its own.
data-validation-text	any string	Text used as error message. Otherwise validator will use its own messages for every field type.

Field types

Type	Description	Available input types
text	Validates text field. Input can have additional attribute data-validation-condition with available length and equal values. If set to length - Validator will look for data-min-length, data-max-length or data-length attributes. If set to equal - Validator will look for data-equal attribute. Then validator will match value with values from attributes.	input / textarea
phone	Under development. No additional options are available.	input
email	Validates email field. No additional options are available.	input
checkbox	At least one checkbox in field should be checked and visible. No additional options are available.	input[type="checkbox"]
radio	At lease one radio should be selected. No additional options are available.	input[type="radio"]
select	Checks for selected option. Its value should not equal 0 or false. No additional options are available.	select

Options (js)

ajax

Type: Object

Default: {}

AJAX options. If set - request will be performed after validation (if form is valid).

lang

Type: String

Default: en

Error text language (en/ru).

removeErrorOnFocusOut

Type: Boolean

Default: false

When true, remove fields incorrect state when clicked outside the form.

fieldsSelector

Type: String

Default: '.form-input'

Form fields selector string.

beforeValidation

Type: Function

Default: null

Parameter: validator

Example:

$('form').validator({
  beforeValidation: function (validator) {
    console.log('performed before validation');
  }
});

Callback performed before form validation.

afterValidation

Type: Function

Default: null

Parameter: validator

Callback performed after form validation.

onValid

Type: Function

Default: null

Parameter: validator

Callback performed after validation, if form is valid (before AJAX).

Methods

Instance method

// initialize and get access to validator's instance
// (if inited on multiple jQuery objects returns an array of instances)
var validatorInstance = $('form').validator();
 
// run form validation
validatorInstance.runFormValidation();
 
// reset form
validatorInstance.resetForm();
 
// get serialized data
var formData = validatorInstance.serializedFormData();
 
// unbind validation from button
validatorInstance.unbindOnClick();

Static methods

/**
 * Expose validator module as jquery plugin.
 * Use before initialazing validator.
 * (fixes jquery conflict when using webpack's "import")
 *
 * @static
 * @param {jQuery} jQuery 
 */
 Validator.expose($);

TODO

• Alphabet / numeric characters validation
• Correct phone number validation
• Simplify data-attr logic
• Refactor errors text / languages
• Add 'afterChange' validation

Requirement

jQuery 1.9.1+

Versioning

Current version is 0.2.2