Form Validation

jqBootstrapValidation - A JQuery validation plugin for bootstrap forms

Official jqBootstrapValidation documentation

Email address

Example
Code

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Email address</label>
    <div class="controls">
      <input type="email" />
      <p class="help-block"></p>
    </div>
  </div>
</form>

Attribute	Value	Req?
type	email
data-validation-email-message	(your failure message)

Required

Example
Code

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Type something</label>
    <div class="controls">
      <input type="text" name="some_field" required />
      <p class="help-block"></p>
    </div>
  </div>
</form>

Attribute	Value	Req?
required	(doesn't need a value)
data-validation-required-message	(your failure message)

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Type a number</label>
    <div class="controls">
      <input type="number" min="42" name="some_field" />
      <p class="help-block">Must be higher than 41</p>
    </div>
  </div>
</form>

Attribute	Value	Req?
min	(minimum number to accept)
data-validation-min-message	(your failure message)

Maximum

Example
Code

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Type a number</label>
    <div class="controls">
      <input type="number" max="42" name="some_field" />
      <p class="help-block">Must be lower than 43</p>
    </div>
  </div>
</form>

Attribute	Value	Req?
max	(maximum number to accept)
data-validation-max-message	(your failure message)

Maximum Length

Example
Code

<form class="form-horizontal" novalidate>
  <div class="control-group">
    <label class="control-label">Type something</label>
    <div class="controls">
      <input type="text" maxlength="10" name="some_field" />
      <p class="help-block"></p>
    </div>
  </div>
</form>

Attribute	Value	Req?
maxlength	(maximum number of characters to accept)
data-validation-maxlength-message	(your failure message)

Minimum Length

Example
Code

<form class="form-horizontal" novalidate>
  <div class="control-group">
    <label class="control-label">Type something</label>
    <div class="controls">
      <input type="text" minlength="10" name="some_field" />
      <p class="help-block"></p>
    </div>
  </div>
</form>

Attribute	Value	Req?
minlength	(minimum number of characters to accept)
data-validation-minlength-message	(your failure message)

Pattern

Example
Code

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Type something</label>
    <div class="controls">
      <input type="text" 
        pattern="a.*z" 
        data-validation-pattern-message="Must start with 'a' and end with 'z'" 
        name="some_field"
      />
      <p class="help-block">Must start with 'a' and end with 'z'</p>
    </div>
  </div>
</form>

Attribute	Value	Req?
pattern	Regex siddim.com to determine if the input is acceptable Note only expects `abc`, not `/^abc$/ig`
data-validation-pattern-message	(your failure message)

Confirm match

Example
Code

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Type something</label>
    <div class="controls">
      <input type="text" name="some_field" />
      <p class="help-block"></p>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">Type it again</label>
    <div class="controls">
      <input 
        type="text" 
        data-validation-match-match="some_field" 
        name="some_other_field" 
      />
      <p class="help-block"></p>
    </div>
  </div>
</form>

Attribute	Value	Req?
data-validation-match-match	name of form field to match
data-validation-match-message	(your failure message)

Max checked options

Example
Code

Select your two favourite colours

Red Orange Yellow Green Blue Indigo Violet

Note: you only need to apply this to one checkbox; the form is searched for matching names for the rest.

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Select your two favourite colours</label>
    <div class="controls">
      <label class="checkbox">
        <input 
          type="checkbox" 
          name="some_field" 
          data-validation-maxchecked-maxchecked="2" 
          data-validation-maxchecked-message="Don't be greedy!" 
        /> Red
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Orange
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Yellow
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Green
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Blue
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Indigo
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Violet
      </label>
      <p class="help-block"></p>
    </div>
  </div>
</form>

Attribute	Value	Req?
data-validation-maxchecked-maxchecked	maximum number of options that may be checked
data-validation-maxchecked-message	your failure message

Min checked options

Example
Code

Select your two favourite colours

Red Orange Yellow Green Blue Indigo Violet

Note: you only need to apply this to one checkbox; the form is searched for matching names for the rest.

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Select your two favourite colours</label>
    <div class="controls">
      <label class="checkbox">
        <input 
          type="checkbox" 
          name="some_field" 
          data-validation-minchecked-minchecked="2" 
          data-validation-minchecked-message="Choose at least two" 
        /> Red
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Orange
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Yellow
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Green
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Blue
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Indigo
      </label>
      <label class="checkbox">
        <input type="checkbox" name="some_field" /> Violet
      </label>
      <p class="help-block"></p>
    </div>
  </div>
</form>

Attribute	Value	Req?
data-validation-minchecked-minchecked	minimum number of options that may be checked
data-validation-minchecked-message	your failure message

Regex matching

Example
Code

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Select your two favourite colours</label>
    <div class="controls">
      <input 
        type="text" 
        data-validation-regex-regex="a.*z" 
        data-validation-regex-message="Must start with 'a' and end with 'z'" 
      />
      <p class="help-block"></p>
    </div>
  </div>
</form>

Attribute	Value	Req?
data-validation-regex-regex	pattern the input must match
data-validation-regex-message	your failure message (strongly recommended you make this descriptive)

Javascript Callback

Example
Code

<script>
  function demo_callback_function($el, value, callback) {
    callback({
      value: value,
      valid: /a.*z/.test(value),
      message: "Must start with 'a' and end with 'z'"
    });
  }
</script>
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Type something</label>
    <div class="controls">
      <input 
        type="text" 
        data-validation-callback-callback="demo_callback_function" 
      />
      <p class="help-block"></p>
    </div>
  </div>
</form>

Attribute	Value	Req?
data-validation-callback-callback	name of the callback function
data-validation-callback-message	your failure message Note: You can include this in the callback response in stead, to customise against the user's error

The callback function will be passed the element (wrapped in jQuery), the field value, and a response function to call when ready.

The response function expects a single variable, a hash containing 'value', 'valid' and optionally 'message'.

The value must be returned, as this is checked against the current value and stale responses are ignored. The 'valid' item in the hash should evaluate to true only if the given value is valid. The message item in the hash, if given, will override the current message on the validator.

Sound a bit complex? Don't worry and take a look at the code tab, its pretty self explanatory.

Warning: While waiting for your function to use the callback, the validator assumes the field is valid. This is to guard against something failing server-side and stopping the user from submitting the form. If your callback takes a long time, the user could be able to submit the form with invalid data without realising.

AJAX

Note: As github doesn't offer dynamic pages yet, this form is only an example and accepts everything

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Type something</label>
    <div class="controls">
      <input 
        type="text" 
        name="ajax_input"
        data-validation-ajax-ajax="/path/to/validator/script" 
      />
      <p class="help-block"></p>
    </div>
  </div>
</form>

<?php
  echo json_encode(
    array(
      "value" => $_REQUEST["value"],
      "valid" => preg_match("/^[A-Z].*$/", $_REQUEST["value"]),
      "message" => "Must start with an uppercase letter"
    )
  );

{
  "value": "test",
  "valid": 0,
  "message": "Must start with an uppercase letter"
}

Attribute	Value	Req?
data-validation-ajax-ajax	path to the validation page on the server
data-validation-ajax-message	your failure message Note: You can include this in the ajax response in stead, to customise against the user's error

The ajax call will be passed the field name and the field value.

The response is expected as a JSON hash containing 'value', 'valid' and optionally 'message'.

Value must be returned, as this is checked against the current value so stale responses are ignored. The 'valid' item in the hash should evaluate to true only if the given value is valid. The message item in the hash, if given, will override the current message on the validator.

Sound a bit complex? Don't worry and take a look at the server tab, its pretty self explanatory.

Warning: While waiting for AJAX call, the validator assumes the field is valid. This is to guard against a something failing and stopping the user from submitting the form. If your ajax takes a long time, the user could be able to submit the form with invalid data without realising.

Numbers

Example
Code

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Type a number</label>
    <div class="controls">
      <input type="number" />
      <p class="help-block"></p>
    </div>
  </div>
  <div class="form-actions">
</form>

Attribute	Value	Req?
type	"number"
data-validation-number-message	your failure message

Mix and multiply validators

Example
Code

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Type something</label>
    <div class="controls">
      <input 
        type="text" 
        data-validation-uppercase-regex="([^a-z]*[A-Z]*)*" 
        data-validation-uppercase-message="Must be uppercase" 
        data-validation-containsnumber-regex="([^0-9]*[0-9]+)+" 
        data-validation-containsnumber-message="Needs at least one number" 
      />
      <p class="help-block"></p>
    </div>
  </div>
</form>

Have you noticed how all the validation messages data-attributes look the same?

data-validation-validatorname-message

Validators are attached with names, so you can have multiple of the same validator if you just name them differently.

In the form above, I've added two Regex validators, one requiring uppercase, the other requiring at least one number. Because they are named differently ('uppercase' and 'containsnumber' respectively) they are both applied rather than cancelling eachother out.

You can also use the HTML5 validators multiple times by specifying them in data-attribute format, such as data-validator-myvalidator-maxlength=10 to use the maxlength HTML5 validator, for example.

Navigation

Demos & Docs

Widgets

Contacts

Messages

Recent