[DISCONTINUED] jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.

Overview

jQuery Form Validator [DISCONTINUED]

Validation framework that let's you configure, rather than code, your validation logic.

I started writing this plugin back in 2009 and it has given me much joy over the years. But all good things must come to an end and now it's time for this plugin to pull in its oars and go down with history.

This plugin is no longer being developed! It supports jQuery v. 1.8 >= 2.2.4. No pull requests will become merged in but feel free to fork and do whatever you like!

Travis

npm version

Usage example

<form action="" method="POST">
  <p>
    Name (4 characters minimum):
    <input name="user" data-validation="length" data-validation-length="min4" />
  </p>
  <p>
    Birthdate (yyyy-mm-dd):
    <input name="birth" data-validation="birthdate" />
  </p>
  <p>
    Website:
    <input name="website" data-validation="url" />
  </p>
  <p>
    <input type="submit" />
  </p>
</form>
<script src="js/jquery.min.js"></script>
<script src="js/form-validator/jquery.form-validator.min.js"></script>
<script>
    $.validate({
        modules : 'date, security'
    });
</script>

Support for HTML5

This plugin can serve as a fallback solution for the validation attributes in the HTML5 spec. With the html5 module you can use the following native features:

Attributes: require, pattern, maxlength, min, max, placeholder

Input types: url, date, time, email, number

Elements: Use the element datalist to create input suggestions

Default validators and features (no module needed)

  • url
  • email
  • domaindomain.com
  • numberfloat/negative/positive/range/step
  • dateyyyy-mm-dd (format can be customized, more information below)
  • alphanumericwith support for defining additional characters
  • lengthmin/max/range
  • requiredno validation except that a value has to be given
  • customValidate value against regexp
  • checkboxgroupensure at least 1 checkbox in group has been selected
  • Show help information automatically when input is focused
  • Validate given values immediately when input looses focus.
  • Make validation optional by adding attribute data-validation-optional="true" to the element. This means that the validation defined in data-validation only will take place in case a value is given.
  • Make validation dependent on another input of type checkbox being checked by adding attribute data-validation-if-checked="name of checkbox input"
  • Create input suggestions with ease, no jquery-ui needed
  • to apply multiple validators to an input element, separate the validator names using a space (ex: required email)

Read the documentation for the default features at #default-validators

Module: security

  • spamcheck
  • confirmation
  • creditcard
  • CVV
  • strengthValidate the strength of a password
  • serverValidate value of input on server side
  • letternumericValidate that the input value consists out of only letters and/or numbers
  • recaptcha - Validate Google reCaptcha 2

Read the documentation for the security module at #security-validators

Module: date

  • timehh:mm
  • birthdateyyyy-mm-dd, not allowing dates in the future or dates that's older than 122 years (format can be customized, more information below)

Read the documentation for the date module at #date-validators

Module: location

  • country
  • federatestate
  • longlat
  • Suggest countries (english only)
  • Suggest states in the US

Read the documentation for the location module at #location-validators

Module: file

  • mime
  • extension
  • size (file size)
  • dimension (size dimension and ratio)

Read the documentation for the file module at #file-validators

Module: logic

  • Dependent validation
  • Require "one-of"

Read the documentation for this module at /#logic

Module: sepa

  • IBAN
  • BIC
  • Sepa

Read the documentation for this module at http://formvalidator.net/#sepa

Module: sweden

  • swemobvalidate that the value is a swedish mobile telephone number
  • swesecvalidate swedish social security number
  • county - validate that the value is an existing county in Sweden
  • municipality - validate that the value is an existing municipality in Sweden
  • Suggest county
  • Suggest municipality

Read the documentation for the Swedish module at http://formvalidator.net/#sweden-validators

Module: uk

  • ukvatnumber
  • uknin
  • ukutr

Read the documentation for the UK module at http://formvalidator.net/#uk-validators

Module: brazil

  • brphoneValidate a brazilian telephone number
  • cep
  • cpf

Module: poland

  • plpesel - validate polish personal identity number (in Polish identity cards)
  • plnip - validate polish VAT identification number
  • plregon - validate polish bussiness identity number

Module: color

  • hex - validate hex color format
  • rgb - validate rgb color format
  • rgba - validate rgba color format
  • hsl - validate hsl color format
  • hsla - validate hsla color format

Module: sanitation

  • trim
  • trimLeft
  • trimRight
  • upper — Convert all letters to upper case
  • lower — Convert all letters to lower case
  • capitalize — Convert the first letter in all words to upper case
  • insertRight — Declare a text that should be inserted at the end of the value, attribute data-sanitize-insert-right
  • insertLeft — Declare a text that should be inserted at the beginning of the value, attribute data-sanitize-insert-left
  • escape — Convert < > & ' " to html entities
  • strip — Comma separated list with words that gets automatically removed
  • numberFormat — Declare the attribute data-sanitize-number-format with any of the formats described on http://numeraljs.com/. Note that this rule requires that numeral.js is included in the page

Read the documentation for the sanitation module at http://formvalidator.net/#data-sanitation

Writing a custom validator

You can use the function $.formUtils.addValidator() to add your own validation function. Here's an example of a validator that checks if the input contains an even number.

<form action="" method="POST">
    <p>
        <input type="text" data-validation="even" />
    </p>
    ...
</form>
<script src="js/jquery.min.js"></script>
<script src="js/form-validator/jquery.form-validator.min.js"></script>
<script>

    // Add validator
    $.formUtils.addValidator({
        name : 'even',
        validatorFunction : function(value, $el, config, language, $form) {
            return parseInt(value, 10) % 2 === 0;
        },
        errorMessage : 'You have to answer an even number',
        errorMessageKey: 'badEvenNumber'
    });

    // Initiate form validation
    $.validate();

</script>

Required properties passed into $.formUtils.addValidator

name - The name of the validator, which is used in the validation attribute of the input element.

validatorFunction - Callback function that validates the input. Should return a boolean telling if the value is considered valid or not.

errorMessageKey - Name of language property that is used in case the value of the input is invalid.

errorMessage - An alternative error message that is used if errorMessageKey is left with an empty value or isn't defined in the language object. Note that you also can use inline error messages in your form.

The validation function takes these five arguments:

  • value — the value of the input thats being validated
  • $el — jQuery object referring to the input element being validated
  • config — Object containing the configuration of this form validation
  • language — Object with error dialogs
  • $form — jQuery object referring to the form element being validated

Creating a custom module

A "module" is basically a javascript file containing one or more calls to $.formUtils.addValidator(). The module file must be placed in the same directory as jquery.form-validator.min.js if you want it to load automatically via the setup function.

You can use the method $.formUtils.loadModules if you want to load the module from a custom path.

$.formUtils.loadModules('customModule otherCustomModule', 'js/validation-modules/');
$.validate({
   modules: 'security, date'
});

The first argument of $.formUtils.loadModules is a comma separated string with names of module files, without file extension.

The second argument is the path where the module files are located. This argument is optional, if not given the module files has to be located in the same directory as the core modules shipped together with this jquery plugin (js/form-validator/)

Show help information

It is possible to display help information for each input. The information will fade in when input is focused and fade out when input looses focus.

<form action="" id="my_form">
	<p>
	  <strong>Why not:</strong>
	  <textarea name="why" data-validation-help="Please give us some more information" data-validation="required"></textarea>
	</p>
	...

Fully customizable

Read about how to customize this plugin over at http://formvalidator.net/#configuration

Validate On Event

You can cause an element to be validated upon the firing of an event, by attaching an attribute to the form input element named data-validation-event="click". When the configuration settings have validateOnEvent : true, the click event will trigger the onBlur validaton for that element. Possible use case: Checkboxes. Instead of waiting for the checkbox to lose focus (blur) and waiting for a validation to occurr, you can specify that elements validation should occur as soon as that checkbox element is clicked.

Localization

This plugin comes with translations for English, Polish, Romanian, Danish, Norwegian, Dutch, Czech, Catalan, Russian, Italian, French, German, Swedish and Portuguese. You can also choose to override the error dialogs yourself. Here you can read more about localization

Default validators

Answer length (required)

<!-- Require an answer (can be applied to all types of inputs and select elements) -->
<input type="text" data-validation="required">
<input type="checkbox" name="agreement" data-validation="required">
<select name="answer" data-validation="required">
  <option value=""> - - Answer - - </option>
  <option>Yes</option>
  <option>No</option>
</select>

<!-- Max 100 characters -->
<input type="text" data-validation="length" data-validation-length="max100">

<!-- Minimum 20 characters -->
<input type="text" data-validation="length" data-validation-length="min20">

<!-- No less than 50 characters and no more than 200 characters -->
<input type="text" data-validation="length" data-validation-length="50-200">

<!-- Require that atleast 2 options gets choosen -->
<select multiple="multiple" size="5" data-validation="length" data-validation-length="min2">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

This plugin also supports the attributes "required" and "maxlength" by using the Html5 module.

Numbers

<!-- Any numerical value -->
<input type="text" data-validation="number">

<!-- Only allowing float values -->
<input type="text" data-validation="number" data-validation-allowing="float">

<!-- Allowing float values and negative values -->
<input type="text" data-validation="number" data-validation-allowing="float,negative">

<!-- Validate float number with comma separated decimals -->
<input type="text" data-validation="number" data-validation-allowing="float" 
		 data-validation-decimal-separator=",">

<!-- Only allowing numbers from 1 to 100 -->
<input type="text" data-validation="number" data-validation-allowing="range[1;100]">

<!-- Only allowing numbers from -50 to 30 -->
<input type="text" data-validation="number" data-validation-allowing="range[-50;30],negative">

<!-- Only allowing numbers from 0.05 to 0.5 -->
<input type="text" data-validation="number" data-validation-allowing="range[0.05;0.5],float">
You can also define the decimal separator when initializing the validation.

<p>
    <strong>Average points</strong><br>
    <input type="text" data-validation="number" data-validation-allowing="float">
  </p>
  ....
</form>
<script>
  $.validate({
    decimalSeparator : ','
  });
</script>

Inputs of type "number" will also become validated by loading the html5 module.

E-mail

<input type="text" data-validation="email">

Inputs of type "email" will also become validated by loading the html5 module.

URL:s

<input type="text" data-validation="url">

Inputs of type "url" will also become validated by loading the html5 module.

Date

<!-- Validate date formatted yyyy-mm-dd -->
<input type="text" data-validation="date">

<!-- Validate date formatted yyyy-mm-dd but dont require leading zeros -->
<input type="text" data-validation="date" data-validation-require-leading-zero="false">

<!-- Validate date formatted dd/mm/yyyy -->
<input type="text" data-validation="date" data-validation-format="dd/mm/yyyy">

See the date module for further validators.

Alphanumeric

<!-- This input requires an answer that contains only letters a-z and/or numbers -->
<input type="text" data-validation="alphanumeric">

<!-- This input requires the same as the one above but it also allows hyphen and underscore -->
<input type="text" data-validation="alphanumeric" data-validation-allowing="-_">

If you want to allow any kind of letters (not only A-Z) you're looking for the letternumeric validator.

Checkboxes Group

Validate qty of checkboxes in a group (same name) have been checked, using min, max or range. Only the first checkbox element in the group needs to have the validation attributes added.

<!-- Require checkboxes in this group, min1 -->
<input type="checkbox" name="newsletters[]" data-validation="checkbox_group" data-validation-qty="min1">
<!-- Require checkboxes in this group, max3 -->
<input type="checkbox" name="newsletters[]" data-validation="checkbox_group" data-validation-qty="max3">
<!-- Require checkboxes in this group, min1, max4 -->
<input type="checkbox" name="newsletters[]" data-validation="checkbox_group" data-validation-qty="1-4">
If your checkboxes group is generated by a server-side script and you don't want to add the validation attributes to each input element, you can use this javascript snippet before calling the validatorLoad() function

<!-- Add validation attributes to first input element in
 checkboxes group, before loading validator -->
<script>
$("[name='newsletters[]']:eq(0)")
  .valAttr('','validate_checkbox_group')
  .valAttr('qty','1-2')
  .valAttr('error-msg','chose 1, max 2');
</script>
Regexp
<!-- This input would only allow lowercase letters a-z -->
<input type="text" data-validation="custom" data-validation-regexp="^([a-z]+)$">

This plugin also supports the attribute "pattern" by using the Html5 module.

Character count down

<p>
    History (<span id="maxlength">50</span> characters left)
    <textarea rows="3" id="area"></textarea>
  </p>
<script>
  $('#area').restrictLength($('#maxlength'));
</script>

Make validation optional

<!-- This input will only be validated if a value is given -->
<input type="text" data-validation="url" data-validation-optional="true">

You can also use the logic module if you want the validation of an input depend on another input having a value.

Display help text

It is possible to display help information beside each input. The text will fade in when the input gets focus on and fade out when the input looses focus. The container for the help text will have the class form-help. If you don't want this feature you can read the setup guide on how to disable it.

<form action="" id="some-form">
    <p>
      <strong>Why not?</strong>
      <input name="why" data-validation-help="Please give us some more information">
    </p>
    ...
  </form>

Validate inputs when blurred

By default each input will become validated immediately when the input looses focus. If you don't want this feature you can read the setup guide on how to disable it.

Input suggestions

There are two ways you can give suggestions to the user while the user types.

  1. Using attribute data-suggestions
<p>
    What's your favorite color?
    <input name="color" data-suggestions="White, Green, Blue, Black, Brown">
  </p>
  ...
</form>
  1. Using $.formUtils.suggest()
<script>
  var largeArray = [];
  largeArray.push('Something');
  largeArray.push('Something else');
  ...

  $.formUtils.suggest( $('#the-input'), largeArray );
</script>

This plugin also supports the data-list element by using the Html5 module.

Ignoring characters You can tell any validator to ignore certain characters by using the attribute data-validation-ignore (comma separated list).

<p>
  How much do you want to donate?
  <!-- Make it optional to end the amount with a dollar-sign -->
  <input name="color" data-validation="number" data-validation-ignore="$">
</p>

Security validators<

Password confirmation

This validator can be used to validate that the values of two inputs are the same. The first input should have a name suffixed with _confirmation and the second should have the same name but without the suffix.

<p>
    Password (at least 8 characters)
    <input name="pass_confirmation" data-validation="length" data-validation-length="min8">

    Confirm password
    <input name="pass" data-validation="confirmation">
</p>
<p>
    E-mail
    <input name="user-email" data-validation="email" />

    Repeat e-mail
    <input name="repeat" data-validation="confirmation" data-validation-confirm="user-email" />
</p>

Password strength

Use this validator to make sure that your user has a strong enough password. Set attribute data-validation-strength to 1, 2 or 3 depending on how strong password you require.

If you want the strength of the password to be displayed while the user types you call displayPasswordStrength() in the end of the form.

<form action="">
    <p>
        <strong>Password:</strong>
        <input name="pass" type="password" break=""
                data-validation="strength" break="" data-validation-strength="2">
    </p>
    ...
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
$.validate({
    modules : 'security',
    onModulesLoaded : function() {
        var optionalConfig = {
            fontSize: '12pt',
            padding: '4px',
            bad : 'Very bad',
            weak : 'Weak',
            good : 'Good',
            strong : 'Strong'
        };

        $('input[name="pass"]').displayPasswordStrength(optionalConfig);
    }
});
</script>

Server side validation

By using this validator you can validate the value given by the user on the server before the form gets submitted. The validation function will send a POST request to the URL declared in data-validation-url. The argument posted to the URL will have the same name as the input being validated.

The form will get the class validating-server-side while the server is being requested.

The response from the validation script must be a JSON formatted object, containing the properties "valid" and "message".

{
    "valid" : true|false,
    "message" : "String with text that should be displayed as error message"
}

Form

<form action="">
    <p>
        <strong>User name:</strong>
        <input name="user" data-validation="server" data-validation-url="/validate-input.php">
    </p>
    ...
</form>

/validate-input.php

<?php
$response = array(
    'valid' => false,
    'message' => 'Post argument "user" is missing.'
);

if( isset($_POST['user']) ) {
    $userRepo = new UserRepository( DataStorage::instance() );
    $user = $userRepo->loadUser( $_POST['user'] );

    if( $user ) {
        // User name is registered on another account
        $response = array('valid' => false, 'message' => 'This user name is already registered.');
    } else {
        // User name is available
        $response = array('valid' => true);
    }
}
echo json_encode($response);

Modifying the server request

The parameter containing the input value, sent to the server, will by default have the same name as the input. You can however set your own parameter name by using the attribute data-validation-param-name. You can also send along other parameters to the server by using the attribute data-validation-req-params.

<?php
  $json = json_encode(array('user'=>$user->get('ID')));
?>
<p>
  <strong>E-mail:</strong>
  <input type="email" name="check-email" data-validation="server"
              data-validation-url="/validate-form-input.php"
              data-validation-param-name="email"
              data-validation-req-params="<?php echo $json ?>" />
</p>

Credit card validation

This validator makes it possible to validate any of the credit cards VISA, Mastercard, Diners club, Maestro, CJB, Discover and American express

<-- Accept credit card number from Visa, Mastercard and American Express -->
<p>
    Credit card number
    <input data-validation="creditcard" data-validation-allowing="visa, mastercard, amex" />
</p>
<p>
    Security code (cvv)
    <input name="cvv" data-validation="cvv" />
</p>

You can also let the user choose a credit card and programmatically change the allowed credit card on the input of the card number.

<p>
    Credit card
    <select name="credit-card" id="credit-card">
        <option value="visa">VISA</option>
        <option value="mastercard">Mastercard</option>
        <option value="amex">American express</option>
        <option value="diners_club">Diners club</option>
        <option value="discover">Discover</option>
        <option value="cjb">CJB</option>
        <option value="maestro">Maestro</option>
    </select>
</p>
<p>
    Credit card number
    <input name="creditcard_num" data-validation="creditcard" data-validation-allowing="visa" />
</p>
...
</div>
<script>
$.validate({
    modules : 'security',
    onModulesLoaded : function() {
        // Bind card type to card number validator
        $('#credit-card').on('change', function() {
            var card = $(this).val();
            $('input[name="creditcard_num"]').attr('data-validation-allowing', card);
        });
    }
});
</script>

Simple captcha

<?php
session_start();
if( isset($_POST['captcha']) && isset($_SESSION['captcha'])) {
    if( $_POST['captcha'] != ($_SESSION['captcha'][0]+$_SESSION['captcha'][1]) ) {
        die('Invalid captcha answer');  // client does not have javascript enabled
    }
    // process form data
    ...
}
$_SESSION['captcha'] = array( mt_rand(0,9), mt_rand(1, 9) );
?>
<form action="">
    <p>
        What is the sum of <?=$_SESSION['captcha'][0]?> + <?=$_SESSION['captcha'][1]?>?
        (security question)
        <input name="captcha" data-validation="spamcheck"
                    data-validation-captcha="<?=( $_SESSION['capthca'][0] + $_SESSION['captcha'][1] )?>"/>
    </p>
    <p><input type="submit" /></p>
</form>

Google reCAPTCHA

Use this validator if wanting to integrate the Google service reCAPTCHA.

<p>
    <input  data-validation="recaptcha" data-validation-recaptcha-sitekey="[RECAPTCHA_SITEKEY]">
</p>

You can also use the setup function to configure the recaptcha service.

$.validate({
    reCaptchaSiteKey: '...',
    reCaptchaTheme: 'light'
});

Letters and numbers

By using the validator letternumeric you can validate that given input value only contains letters and/or numbers. This validator allows any type of character in contrast to the alphanumeric validator, which only allows letters A-Z.

<!-- This input requires an answer that contains only letters and/or numbers -->
<input type="text" data-validation="letternumeric">

<!-- This input requires the same as the one above but it also allows hyphen and underscore -->
<input type="text" data-validation="alphanumeric" data-validation-allowing="-_">

Date validators

Birthdate

This validator is the same as the default date validator except that it only allows past dates and dates that is not older than 120 years.

<!-- Validate birth date formatted yyyy-mm-dd -->
<input type="text" data-validation="birthdate">

<!-- Validate birthdate formatted yyyy-mm-dd but dont require leading zeros -->
<input type="text" data-validation="birthdate" data-validation-require-leading-zero="false">

<!-- Validate birth date formatted dd/mm/yyyy -->
<input type="text" data-validation="birthdate" data-validation-format="dd/mm/yyyy">

Time

<!-- Validate time formatted HH:mm -->
<input type="text" data-validation="time">

Location validators

Country

<!-- Validate country (english only) -->
<input type="text" data-validation="country"/>

State (US)

<!-- Validate US state -->
<input type="text" data-validation="federatestate"/>

Longitude and Latitude

<!-- Validate longitude and latitude (eg 40.714623,-74.006605) -->
<input type="text" data-validation="longlat"/>

Suggest country/state

By using this function you'll make it easier for your visitor to input a country or state.

    <form action="">
        ...
        <p>
            <strong>Which country are you from?</strong>
            <input name="user_country" data-validation="country"/>
        </p>
        <p>
            <strong>Which state do you live in?</strong>
            <input name="user_home_state" data-validation="federatestate"/>
        </p>
    </form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
$.validate({
    modules : 'location',
    onModulesLoaded : function() {
        $('input[name="user_country"]').suggestCountry();
        $('input[name="user_home_state"]').suggestState();
    }
});
</script>

File validators

File size

This validation is only supported by Internet Explorer 10, Mozilla FireFox v >= 3.6 and any of the later versions of webkit based browsers.

<!-- Validate that file isn't larger than 512 kilo bytes -->
<input type="file" data-validation="size" data-validation-max-size="512kb" />

<!-- Validate that file isn't larger than 3 mega bytes -->
<input type="file" data-validation="size" data-validation-max-size="3M" />

File type

This validation will fall back on checking the file extension in older browsers. In modern browsers the validation will check that any of the extensions in data-validation-allowing exists in the mime type declaration of the file. This means that data-validation-allowing="pdf" will work in both modern browsers (checking against "application/pdf") and older browsers (checking the file extension ".pdf").

<!-- Validate that file is an image of type JPG, GIF or PNG and not larger than 2 mega bytes -->
<input type="file" data-validation="mime size" break0="" data-validation-allowing="jpg, png, gif" break=""
       data-validation-max-size="2M" />

<!-- Validate that a file is given and that it has .txt as extension -->
<input type="file" data-validation="required extension" data-validation-allowing="txt" />

Validating multiple files (with separate error messages depending on failed validation):

<input type="file" multiple="multiple" name="images"
    data-validation="length mime size"
    data-validation-length="min2"
    data-validation-allowing="jpg, png, gif"
    data-validation-max-size="512kb"
    data-validation-error-msg-size="You can not upload images larger than 512kb"
    data-validation-error-msg-mime="You can only upload images"
    data-validation-error-msg-length="You have to upload at least two images"
    />

Image dimension and ratio

Use the validator dimension to check the dimension of an image (jpg, gif or png).

<!-- Validate that the image is no smaller than 100x100px -->
<input data-validation="dimension mime" data-validation-allowing="jpg" break="" data-validation-dimension="min100" />

<!-- Validate that the image is no smaller than 300x500 px (width/height) -->
<input data-validation="dimension mime" data-validation-allowing="jpg" break="" data-validation-dimension="min300x500" />

<!-- Validate that the image is no larger than 500x1000 px -->
<input data-validation="dimension mime" data-validation-allowing="jpg" break="" data-validation-dimension="max500x1000" />

<!-- Validate that the image is no smaller than 100x100 px and no larger than 800x800 -->
<input data-validation="dimension mime" data-validation-allowing="jpg" break="" data-validation-dimension="100-800" />

<!-- Validate that the image is no smaller than 200x400 px and no larger than 600x1200 -->
<input data-validation="dimension mime" data-validation-allowing="jpg" break="" data-validation-dimension="200x400-600x1200" />

Use the attribute data-validation-ratio to validate that the uploaded image has a certain ratio

<!-- Validate that only square images gets uploaded -->
<input data-validation="ratio mime" data-validation-allowing="jpg, png, gif" break="" data-validation-dimension="min100" data-validation-ratio="1:1" />

<!-- Validate that only somewhat square images gets uploaded -->
<input data-validation="ratio mime" data-validation-allowing="jpg" break="" data-validation-dimension="min100" data-validation-ratio="8:10-12:10" />

Logic

Validators depending on each other

Use the attributes data-validation-depends-on to configure that an input is optional as long as another input is left without an answer.

<!-- Require e-mail only if checkbox is checked -->
<p>
    <strong>Contact me:</strong>
    <input name="do-contact" type="checkbox" value="1" />
</p>
<p>
    <strong>E-mail:</strong>
    <input
           type="text"
           data-validation="email"
           data-validation-depends-on="do-contact"
    />
</p>
<!-- Require a state to be given if the user comes from either USA or Canada -->
<p>
    <strong>Country:</strong>
    <input
           type="text"
           name="country"
           id="country-input"
           data-validation="country"
    />
</p>

<p>
    <strong>State:</strong>
    <input type="text"
           name="state" break=""
           data-validation="required" break1=""
           data-validation-depends-on="country" break2=""
           data-validation-depends-on-value="usa, canada"
    />
</p>
</div>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
$.validate({
    modules : 'location, logic',
    onModulesLoaded : function() {
        $('#country-input').suggestCountry();
    }
});
</script>

Require only one out of several inputs

Use the attribute data-validation-optional-if-answered to tell the validator that only one, out of a group of inputs, requires an answer.

<p>
    <strong>Home phone number:</strong>
    <input name="home-phone"
           data-validation="number" break=""
            data-validation-optional-if-answered="cell-phone, work-phone" />
</p>
<p>
    <strong>Cell phone number:</strong>
    <input name="cell-phone"
           data-validation="number" break=""
            data-validation-optional-if-answered="home-phone, work-phone" />
</p>
<p>
    <strong>Work phone number:</strong>
    <input name="work-phone"
           data-validation="number" break=""
            data-validation-optional-if-answered="home-phone, cell-phone" />
</p>
</div>

Changelog

2.3.19

  • New translations (Polish, Romanian, Danish, Norwegian, Dutch, Czech, Russian, Italian)
  • Several improvements made to already existing translations
  • "Validation help" no longer puts constraints on input names
  • Improved confirmation validation
  • Config parameter errorMessagePosition is now only used to point out where error message should be placed. New configuration parameters is introduced that handles custom positioning of error messages #226
  • Now possible to add data-validation-ignore to filter out certain characters before validation
  • New sanitation method strip that removes defined characters
  • Now possible to declare attributes not prefixed with data-validation in jsconf module
  • All inputs gets sanitized on page load when using sanitation module
  • Allow dates to omit leading zero using data-validation-require-leading-zero="false"
  • Module toggleDisabled now acts on value change, not only mouse click
  • data-validation-if-checked now deprecated, use data-validation-depends-on instead #153
  • Event beforeValidation now gets value, language and configuration as arguments and can be used to prevent validation of the input.
  • Security module now has a recaptcha validator that uses Google reCaptcha 2
  • The plugin is installable using npm (also possible to require validation modules when using browserify)
  • Polish validation module
  • Brazilian validation module
  • UK validation module now also have validators uknin ukutr
  • Sepa-module that makes it possible to validate sepa, iban and bic.
  • New module named "logic" containing the features data-validation-depends-on and data-validation-optional-if-answered

2.2.8

  • The plugin is now again possible to install via bower.
  • Portoguese language pack and validators
  • New module used for data-sanitiation
  • E-mail addresses now validated in accordance to rfc 6531
  • Now possible to use $.fn.validate to programmatically validate inputs
  • Hidden inputs won't get validated by default (can be overriden using option validateHiddenInputs)

2.2.43

  • Fixed min/max parse error in HTML5 module
  • Now also supports Twitter bootstraps horizontal forms
  • This plugin now also distributes a default CSS theme including success/fail icons (used on formvalidator.net)
  • Email validation now won't fail if email begins with a number
  • This plugin now comes with error dialogs translated to English, French, German, Spanish and English.
  • New validator letternumeric. Validates that input consists out of any type of letter (not only alphanumeric) and/or numbers
  • You can now validate image dimension and ratio
  • ... and a bunch of other smaller bug fixes and improvements.

2.2.0

  • Now possible to define an error message for each validation rule on a certain input (issue #113)
  • This plugin now serves as a html5 fallback. You can now use the native attributes to declare which type of validation that should be applied.
  • Use a template for error messages when having errorMessagePosition set to top
  • Added validation of credit card number and CVV to the security module
  • Event onElementValidate added
  • Use the attribute data-validation-confirm to declare which input that should be confirmed when using validation=confirmation (issue #112)
  • Validation "required" now supports inputs of type radio
  • $.validateForm is now deprecated, use $.isValid instead
  • Possible to check if form is valid programmatically without showing error messages
  • Select elements can now be validated server-side
  • Cleaned up dialog messages
  • Various IE8 fixes
  • Possible to send along parameters to the server when using server side validation
  • Now possible to set your own parameter name when using server side validation
  • Improved/simplified URL validation
  • ... and a whole lot more small improvements

2.1.47

  • Incorrect error-styling when using datepicker or suggestions is now fixed
  • Incorrect error-styling of select elements is now fixed
  • Deprecated function $.validationSetup is now removed, use $.validate() instead
  • You can now return an array with errors using the event onValidate
  • You can now declare an element where all error messages should be placed (config.errorMessagePosition)

2.1.36

  • Now possible to use the native reset() function to clear error messages and error styling of the input elements

2.1.34

2.1.27

  • E-mail validation support .eu top domain
  • Improvements in server validation
  • Now possible to re-initiate the validation. This makes it possible to dynamically change the form and then call $.validate() again to refresh the validation (issue #59)
  • Number validation now supports range

2.1.15

  • E-mail addresses can now contain + symbol
  • Correction of the US states in validation "federatestate"
  • Fixed bug in server validation

2.1.09

  • File validation now support multiple files
  • Length validation can now be used to validate the number of uploaded files using a file input that supports multiple files
  • Validation classes is no longer applied on inputs that for some reason shouldn't become validated

2.1.08

  • Now possible to configure the decimal separator when validating float values. Use either the attribute data-validation-decimal-separator or the property decimalSeparator when calling $.validate()
  • $.validationSetup is renamed to $.validate. You will still be able to initiate the validation by calling the $.validationSetup but it's considered deprecated.

2.1.06

  • Modules can now be loaded from remote websites

2.1.05

  • Fixed language bug (issue #43 on github)
  • Validation on server side is now triggered by the blur event
  • Now using class names that's compliant with twitter bootstrap 3.x

2.1

  • Code refactoring and some functions renamed
  • Validator "checkbox_group" added

2.0.7

  • Now possible to validate file size, extension and mime type (using the file module)

2.0

  • [min|max]_length is removed (now merged with length validation).
  • The number, int and float validation is merged together, all three variants is now validated by the number validation.
  • Phone validation is moved to "sweden" module and renamed to swephone.
  • The attribute to be used when defining the regular expression for custom validations is now moved to its own attribute (data-validation-regexp)
  • Length validation now looks at attribute data-validation-length (eg. min5, max200, 3-12).
  • The validation rule no longer needs to be prefixed with "validate_" (it's still possible to use the prefix but it's considered deprecated).
  • Some validation functions is moved to modules (see the function reference over at http://formvalidator.net).
  • Added function $.validationSetup() to reduce the amount of code that has to be written when initiating the form validation.

Credits

http://www.formvalidator.net/#credits

Comments
  • What about IE8 ?

    What about IE8 ?

    Hi,

    I'm using the plugin with great satisfaction, until I test under IE8.

    (sorry about that ! )

    I checked documentation without mention of IE8, and when I check the demo page, I can see that it does not work with IE8.

    What happens is that the onBlur check is performed (CSS inputs change when the input looses focus), but the submit button do not send the form.

    When submitting the form without changing anything (no focus/blur on any element), nothing happens either. With other browsers, a check is performed and all required fields appears in red, as well as error messages.

    Nothing happens at all with IE8. I don't see errors messages with the F12 tools on IE8.

    What is the status of the plugin with IE8 ? Is there any workaround ?

    Thank you.

    Bug Unconfirmed 
    opened by simonvart 16
  • jQuery function .append('<form here>') causes no validation.

    jQuery function .append('
    ') causes no validation.

    On my current site i'm adding in rows to a form. This is for invoices so every invoice can have from 1 item to thousands of items. every time i add a row i use the .append() function of jQuery. The form along with the append() has all the validation variables correctly inputted. the first row of the invoice works perfectly until i try to append the next row of the form to it. As soon as i append another row it breaks and allows the form to submit without any validation

    The image below shows how the onBlur is working for the first row but none other. Also from the view of the form in this image if i was to hit submit, even with the validator knowing that the first row is not validated it will still allow the form to POST into the php.

    form

    Bug Unconfirmed 
    opened by bradthedev 13
  • Form submit not working in IE8

    Form submit not working in IE8

    $.validate({
      form : '.cpLoginForm',
      language: myLanguage,
      modules : 'security'
    });
    
    <form name="loginform" action="/wp-login.php" method="post" class="cpLoginForm" autocomplete="off">
        <div class="form-group has-feedback">
            <label class="sr-only" for="log">Email</label>
            <input data-validation="email" class="form-control" id="cp_email" name="log" type="text" placeholder="E-mail" autocomplete="off">
            <span class="cpInputStatus glyphicon glyphicon-remove form-control-error"></span>
            <span class="cpInputStatus glyphicon glyphicon-ok form-control-success"></span>
        </div>
    
        <div class="form-group has-feedback">
            <div class="cpPasswordInput">
                <label class="sr-only" for="cp_password">Password</label>
                <input data-validation="length" data-validation-length="min8"
                       class="form-control" id="cp_password" name="pwd" type="password"
                       placeholder="Password">
                <span class="cpInputStatus glyphicon glyphicon-remove form-control-error"></span>
                <span class="cpInputStatus glyphicon glyphicon-ok form-control-success"></span>
            </div>
        </div>
    
        <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>">
        <input type="submit" id="sendCpForm" name="wp-submit" class="bigredbutton" value="Log in">
    </form>
    
    Bug Unconfirmed Next release 
    opened by arthurshlain 12
  • Data of birth validation issue

    Data of birth validation issue

    Sir, First of all thanks for your effort which have done by team.here i am facing a problem on date of birth validation my code is


    i think,bug occur when i select data from data-picker through of mouse.Once tab pass this input tag it make green.

    kindly check??

    image

    Feature Fixed in next release 
    opened by uttamjaiswal86 11
  • Submit not working

    Submit not working

    Currently when I just use the plugin as is and I have just a simple form with two text fields and click on submit, the form does not submit.

    Any idea?

    Won't fix 
    opened by Tklaversma 10
  • Using undefined validator

    Using undefined validator

    Hello, thanks for this great plugins but I 've problem, my browser say : Using undefined validator for all my modules. erroformvalidation My code : http://pastebin.com/3BZ6bmb2

    When I use this plugin with classic HTML work fine but when I use it on ASPX page I've these errors. All files for modules are correctly loaded by browser.

    opened by QuentinVaut 10
  • Problem on jquery validate and radio buttons

    Problem on jquery validate and radio buttons

    When using $.validate (not form submit) and tabbing through form, a radio button message on the first item of a set does not clear if the second item of the pair is clicked. I only want to show one message such as "Choose a button" and the user must click one or other.

    Bug 
    opened by cretace 10
  • Fixed issue with Leap Years

    Fixed issue with Leap Years

    29/02/2012 which is a Leap Year (and therefore has 29 days in the month of Febrary) was being shown as an incorrect Date.

    This has been resolved in my latest commit (along with the jQuery Library missing, and therefore the examle.html file doesn't instantly work (I have linked to Google CDN to include this so new downloaders can use straight away to evaluate).

    I hope you don't mind me doing all these changes, I just love the library, and want to get this to a position where I can use in some new projects I am working on :) :)

    opened by mattclements 10
  • Uncaught TypeError: b.each is not a function

    Uncaught TypeError: b.each is not a function

    First off, thanks so much for this plugin! Very very cool!

    Question: I have rows and elements that are dynamically added to the page. I need to make sure validation, sanitize, etc... apply to those new elements. The new elements all have the correct HTML attributes needed (data-sanitize="trim upper", etc...)

    When I run this after I add a new row: $.validate({form:'#myFormId', modules: 'html5, sanitize', validateOnBlur: false});

    If get this error: Uncaught TypeError: b.each is not a function

    Ideas?

    Bug Fixed in next release 
    opened by jasonwmatteson 9
  • Add universal module definition support (related to issue #329)

    Add universal module definition support (related to issue #329)

    -Add prepublish script and .npmignore so prod files are always present before publishing (not necessary now since prod files are in the repo, but would be necessary if prod files are not kept in source control); this also ensures the latest version is always built/tested/minified before publishing on npm -Add universal module definition task to add boilerplate to main files (better support for AMD and CommonJS-like environments)

    This seems to work fine with Browserify (excluding add-on validation modules) and with require.js. However, extra modules very likely won't work with Browserify out of the box. Users would have to transfer those files to the same directory the rest of the JS is in.

    opened by ray-print 9
  • Check image dimensions

    Check image dimensions

    Is it possible to check the image size/dimensions on a file input?

    Maybe this is something for a future release? :) Something like this: <input type="file" data-validation="dimension" data-validation-min-dimension="500px">

    Feature Fixed in next release Next release 
    opened by Schooott 9
  • install in es6 standard

    install in es6 standard

    Good morning, hello.

    I have a question, is it possible to install the plugin in the ES6 standard ??? The first step is to install the plugin via npm (npm and jquery-form-validator).

    and what's next ?

    import 'jquery-form-validator' doesnt work

    What files should I import in my class?

    opened by natsukiss 0
  • Recaptcha after page load jquery

    Recaptcha after page load jquery

    Hi Team,

    @victorjonsson Hope I get some support from this as I found this plugin very helpful.

    Currently I am using recaptcha from this plugin like below.

    $( document ).ready(function() {  
      
        $.validate({
            
            modules: 'security, sanitize, date',
            scrollToTopOnError: false,
            reCaptchaSiteKey: 'MY_KEY',
            reCaptchaTheme: 'light'
        });
    });
    

    And in my HTML <input data-validation="recaptcha" >

    And its working as per my requirements.

    However, I am having few issues in Google PageSpeed which suggests me to load ReCaptcha after page load.

    So I am just wondering is there a way to load this after my page load using this library ?

    Any help or suggestion will be highly appreciated.

    Thanks in advance.

    opened by mittultechnobrave 0
  • How to validate a number range which does not include the limit that mentioned.

    How to validate a number range which does not include the limit that mentioned.

    I was using a jQuery form validator with the validation against a number and the range is something like this [1, 1000]. But now my company wants to change it to a decimal and also wants to allow the numbers greater than 0. something like x>0.5 and x<1.5. I mean the range should be greater than zero. How to achieve this using the jQuery form Validator? Basically we do not want to set the lower limit. It can be anything greater than zero.

    opened by navyamereddy91 0
  • Where do i find the Documentation?

    Where do i find the Documentation?

    @victorjonsson I know that you are not working on this plugin anymore, but is there a chance to put http://www.formvalidator.net/ back online or maybe host it as a static files on Github Pages?

    opened by Igloczek 4
  • About discontinuing the plugin .

    About discontinuing the plugin .

    Good evening,

    A pity that this plugin was discontinued, I think it is very good .... Is there an equivalent and still under maintenance?

    ***** Forgive my English, as I am using the translator.

    opened by douglas-88 3
Owner
Victor Jonsson
Victor Jonsson
jQuery library to validate html forms. compatible with bootstrap v4 and bootstrap v3

jQuery form validation jQuery form validation is a library that helps you to validate your HTML form, it's completable with both Bootstrap 3 and Boots

Bassam Nabriss 33 Jun 10, 2021
Tag-input - A versetile tag input component built with Vue 3 Composition API

TagInput A versetile tag input component built with Vue 3 Composition API. Please read this article to learn how to build this package step by step an

Mayank 12 Oct 12, 2022
Vue-input-validator - 🛡️ Highly extensible & customizable input validator for Vue 2

??️ Vue-input-validator demo! What is this package all about? By using this package, you can create input validators only with the help of a single di

null 14 May 26, 2022
Validate your forms, frontend, without writing a single line of javascript

Parsley JavaScript form validation, without actually writing a single line of JavaScript! Version 2.9.2 Doc See index.html and doc/ Requirements jQuer

Guillaume Potier 9k Dec 27, 2022
Validate properties and well known annotations in your Backstage catalog-info.yaml files.

Backstage entity validator This package can be used as a GitHub action or a standalone node.js module GitHub action Inputs path Optional Path to the c

Roadie 39 Dec 26, 2022
A simple and composable way to validate data in JavaScript (and TypeScript).

A simple and composable way to validate data in JavaScript (and TypeScript). Usage • Why? • Principles • Demo • Examples • Documentation Superstruct m

Ian Storm Taylor 6.3k Jan 9, 2023
JQuery-TableToExcel - Light weight jQuery plugin for export HTML table to excel file

tableToExcel Light weight jQuery plugin for export table to excel file Demos Website and demo here: http://tanvirpro.com/all_project/jQueryTableToExce

Tanvir Sarker 4 May 8, 2022
Validate for XML schema and returns all the possible failures

detailed-xml-validator Validate for XML schema and returns all the possible failures Sample Rules file <?xml version = "1.0"?> <students nillable="fa

Natural Intelligence 11 Dec 20, 2022
This Login Form made using React hooks , React Js , Css, Json. This form have 3 inputs, it also validate those inputs & it also having length limitations.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Yogesh Sharma 0 Jan 3, 2022
Validate graphql operations against a schema

@graphql-validate With the power of GraphQL-Tools and GraphQL-JS, we are able to provide a smooth experience for validation your GraphQL operations du

Saihajpreet Singh 13 Dec 23, 2022
A library for validate a string using regular expressions.

Fogex Form Regex Quickly and easily check if the content is valid. Installation npm install fogex or yarn add fogex Usage import fogex from 'fogex';

null 5 May 5, 2022
A simple library to validate Mexican CURPs (Personal ID)

Validate CURP A simple and lightweight library to validate Mexican CURPs (Personal ID). Install NodeJS Use NPM: $ npm install --save validate-curp Or

Manuel de la Torre 15 Nov 24, 2022
Jquery.iocurve - jQuery plugin like Tone Curve on Photoshop or GIMP

jquery.iocurve jQuery plugin like Tone Curve on Photoshop or GIMP. See Official page for more information. Quick start Create HTML and open in your br

null 5 Jul 28, 2022
HTML 5 & Bootstrap Jquery Form Validation Plugin

HTML 5 & Bootstrap Jquery Form Validation Plugin HTML 5 & Bootstrap 5 & Jquery 3 jbvalidator is a fresh new jQuery based form validation plugin that i

null 37 Dec 6, 2022
Jquery.Circle.js - Circle is a Javascript global-menu library for jQuery.

Circle About Circle is a Javascript global-menu library for jQuery. Read more at the website: http://uc.gpgkd906.com/ Installation Just include the Ja

陈瀚 3 Jul 19, 2021
Enable browser autofill for any input field.

Autofill It Enable browser autofill for any input field. Get it on Chrome Web Store! A Google Chrome extension that sets autocomplete attributes of an

ygkn 5 Dec 15, 2022
Easy HTML Form Validator

Easy HTML Form Validator

Ali Nazari 314 Dec 26, 2022