Skip to the content.

Mighty Form Validator

Mighty Form Validator is a generic client-side form validator written in JavaScript with focus on being:

Version: 0.3.0

For changes, see changelog:



  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 one file and skip step 2.
  2. Include the validators of your choosing from src/js/validators
  3. Have fun!


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.


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.


<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"}'>

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 fields are found.
classes Set custom CSS classes to add to a form input (parent) when it is valid or invalid. 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).


<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.


<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.


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


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 class="form__group">
        <label>Street: </label>
        <input class="mfvField" type="text" name="street" value="" data-validators="notempty" data-errortext="Required field">
    <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 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 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 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 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 class="form__group">
            <label>Field 1: </label>
            <input id="field1" class="mfvField" data-validators="notempty" type="text" name="field1" value="">

        <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 class="form__group">
        <button type="submit">Submit</button>


For information about developing on this project, see: