validate-form

Easily validate a form element against a set of rules. The rules can be sync or async, and the form submission will wait.

Installation

$ component install segmentio/validate-form

Example

var validate = require('validate-form');
var form = document.getElementById('#form');

validate(form)
  .on('blur')
  .field('email')
    .is('required', 'Please enter your email.')
    .is('email')
  .field('password')
    .is('required')
    .is('minimum', 8, 'Minimum 8 characters.')
    .is(function (value) {
      return value != 'password');
    }, 'Come on now...');

API

validate(el)

Create a new validator for a given form el.

#field(name)

Add a field to the validator by its name attribute. You can also just pass the input el directly.

#is(fn, [message])

Add a validation fn with an optional error message.

#is(string, [message])

Add a validation function by its shorthand string with an optional error message.

#is(regexp, [message])

Add a validation regexp with an optional error message.

#is(string, settings..., [message])

Add a validation function that takes optional settings... and returns a regular validation function. This would be for things like minimum length, which require a length number.

#on(event)

Trigger the validation on an event in addition to submit. For example 'blur'.

#validate(callback)

Validate the form manually and callback(err, valid, msg).

#value(fn)

Set the value adapter fn, for retrieving the value of the element being validated. By default it will use component/value.

#invalid(fn)

Set the invalid adapter fn, for marking the element as invalid. By default this will add an invalid class to the element and append a message label element.

#valid(fn)

Set the valid adapter fn, for marking the element as valid. By default, this will remove an invalid class and any message elements.

Shorthands

• RegExp - validates against a RegExp.
• 'required' - requires a non-empty value.
• 'email' - requires an email address.
• 'url' - requires a URL.
• 'domain' - requires a domain name.
• 'color' - requires a hex, RGB or HSL color string.
• 'hex' - requires a hex color string.
• 'rgb' - requires an RGB color string.
• 'hsl' - requires an HSL color string.
• 'minimum', length - requires a minimum length of characters. (also min)
• 'maximum', length - requires a maximum length of characters. (also max)
• 'equal', other - requires that this field has the same value as other field

License

MIT