daccord-validation

D’accord

Kickoff validation plugin for forms. Uses HTML 5 form attributes to trigger validation tests.

Usage

var Daccord = require('daccord-validation');
new Daccord(document.querySelector('form'));
//or
new Daccord(document.querySelector('form'), options);

<form class="l-container" action="/somewhere">
    <div class="form-controlGroup">
        <label class="form-label" for="field1">Text, required, maxlength 10</label>
        <input class="form-input" id="field1" name="field1" type="text" required maxlength="10">
    </div>
    <div class="form-controlGroup">
        <label class="form-label" for="field2">Email, required</label>
        <input class="form-input" id="field2" name="field2" type="email" required>
    </div>
    <div class="form-controlGroup">
        <label class="form-label" for="field3">Text, required with message</label>
        <input class="form-input" id="field3" name="field3" type="text" data-val-required="This field is required" required>
        <div class="form-message"></div>
    </div>
    <button class="btn btn--primary" type="submit">Submit</button>
</form>

Error messages are shown if there is an element with the class of form-message in the same form-controlGroup as the input field.

has-error and has-success are added to the form-controlGroup to indicate success or failure.

Options

fields

Type: String
Default: input, select, textarea

Fields to validate.

inlineErrors

Type: Boolean
Default: false

errorClass

Type: String
Default: has-error

successClass

Type: String
Default: has-success

focus

Type: Boolean
Default: false

liveValidation

Type: Boolean
Default: false

API

Rule	Triggered by	Error message
Required field	required or data-val-required attribute	data-val-required="Message"
Max length	maxlength="num" or data-val-length-max="num"	data-val-length="Message"
Min length	minlength="num" or data-val-length-min="num"	data-val-length="Message"
Pattern	pattern="regex" or data-val-regex-pattern="regex"	data-val-regex="Message"
Email	type="email"	data-val-email="Message"
Matches	data-val-equalto-other="name of other"	data-val-equalto="Message"