mighty-form-validator v0.3.0

Mighty Form Validator

Generic client-side form validator written in JavaScript with focus on being:

• Lightweight
• Extendable
• Easy-to-use

Version: 0.3.0

For changes, see changelog: CHANGELOG.md

Requirements

• Nuthin', it's all plain ol' JavaScript

Installation

1. Include dist/mightyFormValidator.min.js (Validator Engine), or include dist/mightyFormValidator.full.js to include all current available validators with the Validator Engine in 1 file and skip step 2.
2. Include the validators of your choosing from src/js/validators
3. Have fun!

Documentation

The validator loops through all fields that require validation within your form.

To select a form for validation you have to add the css class mfvForm to the form tag. Within this form, the fields dat need validation should have the css class mfvField assigned to them.

Options

Form options

Options for the entire form can be set by adding a data-attribute data-validator-options to the form tag with a json string.

Example:

<form type="text" name="input1" data-validator-options='{"initialRun": true, "debug": true, "classes": {"passed": "is_valid", "failed": "is_error"}, "formClasses": {"passed": "form_is_valid", "failed": "form_is_failed"}, "parentSelector": "form__group"}'>
...
</form>

The following options are available:

Field options

For each form field you can choose which validators to run and set some options per validator. With the data-attribute data-validators you can select the validators you want to run on the form field. Multiple validators are separated with a comma (NO SPACES).

Example:

<input type="text" name="input1" data-validators="notempty,email">

Validators can have extra options. With the data-attribute data-validator-options you van set these options for each validator.

There are also a few non-validator-specific options, these are grouped within general.

Example:

<input type="text" name="input1" data-validator-options='{"general": {"validatorTrigger": "field_id"}, "number": {"decimals": false}, "customvalidator" {"setting1": "this", "setting2": "that"}}'>

Non-validator-specific form field options:

Error messages

It's possible to display an message when a field is invalid. This message can be set with the data-attribute data-errortext.

When you have multiple validators on a form field, it is possible to have a custom error message for each validator. With the data-attribute data-validator-options you can set an error message for each validator. These error messages will overwrite any messages set with data-errortext.

If no error message is set, none will be shown.

Example:

<input type="text" name="input1" data-validator-options='{"notempty": {"errorText": "This is a required field"}, "email": {"errorText": "Enter a valid email address"}}'>

Validators

The validators are executed in the order they are places in data-validators. When a validator fails, the validation of the field is halted and the field will be set invalid.

NOTE: The notempty validator is a special one and is always executed first when assigned to a form field.

NOTE 2: The notempty validator is also the only validator that is defined in the validator engine core file (mightyFormValidator.js). All other validators are defined externally. The default (core) validators can be found in the validators folder.

NOTE 3: When the notempty validator is not assigned to a field, the field is not required. Other validators assigned to the field are only executed when the field is not empty. So the field is only validated when it has a value. When empty, the field is not valid or invalid, it is unvalidated.

Example HTML form

<form class="form mfvForm" data-validator-options='{"initialRun": true, "classes": {"passed": "is_valid", "failed": "is_error"}}'>
    <div class="form__group">
        <label>Name: </label>
        <input class="mfvField" type="text" name="name" value="" data-validators="notempty" data-errortext="Required field">
    </div>
    <div class="form__group">
        <label>Street: </label>
        <input class="mfvField" type="text" name="street" value="" data-validators="notempty" data-errortext="Required field">
    </div>
    <div class="form__group">
        <label>Housenumber: </label>
        <input class="mfvField" type="text" name="number" value="" data-validators="number" data-validator-options='{"number": {"decimals": false}}' data-errortext="Invalid number">
    </div>
    <div class="form__group">
        <label>Birth Date: </label>
        <input class="mfvField" type="text" name="date" value="" data-validators="date" data-validator-options='{date: "acceptShortyear": true, "correctFormat": true, "allowFuture": false}}' data-errortext="Invalid birth date (dd-mm-yyyy)">
    </div>
    <div class="form__group">
        <label>E-mail: </label>
        <input class="mfvField" type="text" name="email" value="" data-validators="notempty,email" data-errortext="Invalid e-mail address">
    </div>
    <div class="form__group">
        <label>URL: </label>
        <input class="mfvField" type="text" name="url" value="" data-validators="url" data-validator-options='{"url": {"requireScheme": true}}' data-errortext="Invalid URL">
    </div>
    <div class="form__group">
        <label>Phone number: </label>
        <input class="mfvField" type="text" name="phone" value="" data-validators="phone-dutch" data-validator-options='{"phone-dutch": {"correctFormat": true}}'>
    </div>
    
    <fieldset>
        <div class="form__group">
            <label>Field 1: </label>
            <input id="field1" class="mfvField" data-validators="notempty" type="text" name="field1" value="">
        </div>

        <div class="form__group">
            <label>Field 2: </label>
            <input id="field2" class="mfvField" data-validators="notempty,equals" data-validator-options='{"equals": {"compareElement": "#field1"}}' type="text" name="field2" value="">
        </div>
    </fieldset>
    
    <div class="form__group">
        <button type="submit">Submit</button>
    </div>
</form>

Development

For information about developing on this project, see: DEVELOPMENT.md