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:

| Option | Description | | ----- | ------------ | | initialRun | Validate the form on page-load. | | validateSubmission | Validate the form on submit and prevent submit when invalid. | | classes | Set custom CSS classes to add to a form input (parent) when it is valid or invalid is. Default are validation-passed and validation-failed. | | formClasses | Set custom CSS classes to add to the form when the full form is validated valid or invalid. Default are validation-passed and validation-failed. | | parentSelector | By default the validation classes (valid or invalid) are placed on the direct parent of the validated form field. With this option you can supply a selector to apply the classes to the closest parent matching the selector. | | debug | Enable debug-mode. When enabled, the console.log() is filled with debug info. |

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:

| Option | Description | | ----- | ------------ | | validatorTrigger | The ID of the field that gets revalidated when the current field changes. | | keyUp | Trigger field validation on the key up event, possible values: 0 (no, default), 1 (only show if field is valid), 2 (show if field is valid or invalid). |

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.

| Validator | Name | Description | Options | | --------- | ------------ | ------- | ------ | | Required field | notempty | Check if field is not empty. Default in the validator engine. | No options | | E-mail | email | Check if the value is formatted as a valid email address. | No options | | URL | url | Check if the value is formatted as a valid URL. | requireScheme Valid URL scheme required. Boolean, default false | | Date | date | Check if value is a valid date. Optionally with auto-correction of the input, allow/disable future dates, allow short year (2 digits) | acceptShortyear allow 2 digits notation for date year. Boolean, default false correctFormat Auto-correct input date. Boolean, default false allowFuture Allow future date, default true | | Min / max length | length | Check if value has a minimum and/or maximum string length. | min Minimum length. Integer, optional max Maximum length. Integer, optional | | Number | number | Check if value is a number, optional with or without decimals, and min or max value. | decimals Allow decimals. Boolean, default true min Minimum value. Float, optional max Maximum value. Float, optional | | Custom regex | regex | Validate the value against a custom regular expression. | regex Regular Expression to validate against. String, ie. "^[0-9]{4}([ ]){0,1}([a-zA-Z]){2}$" | | Equals | equals | Compare field value with another fields value. | compareElement CSS selector for the other field. String: ie. #ditveld | | Zipcode | zipcode | Check if the value is formatted as a valid zipcode. Custom zipcode-regexes can be added with: mightyFormValidator.validators.zipcode.addRegex('PL', regExp); | country Country to validate NL,BE,DE. String, default NL correctFormat Auto-correct input, Dutch zipcodes (NL) only? Boolean, default false | | Dutch phone number | dutch-phone | Check if value is a valid Dutch phone number. Optionally with auto-correction of the input | correctFormat Auto-correct input date. Boolean, default false |

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