Form Validation

jqBootstrapValidation - A JQuery validation plugin for bootstrap forms

Official jqBootstrapValidation documentation

Email address

Example
Code

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Email address</label>
<divclass="controls">
<inputtype="email"/>
<pclass="help-block"></p>
</div>
</div>
</form>

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

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Type something</label>
<divclass="controls">
<inputtype="text"name="some_field"required/>
<pclass="help-block"></p>
</div>
</div>
</form>

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

Minimum

Example
Code

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Type a number</label>
<divclass="controls">
<inputtype="number"min="42"name="some_field"/>
<pclass="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

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Type a number</label>
<divclass="controls">
<inputtype="number"max="42"name="some_field"/>
<pclass="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

<formclass="form-horizontal"novalidate>
<divclass="control-group">
<labelclass="control-label">Type something</label>
<divclass="controls">
<inputtype="text"maxlength="10"name="some_field"/>
<pclass="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

<formclass="form-horizontal"novalidate>
<divclass="control-group">
<labelclass="control-label">Type something</label>
<divclass="controls">
<inputtype="text"minlength="10"name="some_field"/>
<pclass="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

Type something

Must start with 'a' and end with 'z'

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

Attribute	Value	Req?
pattern	Regexto determine if the input is acceptable Noteonly expects `abc`, not `/^abc$/ig`
data-validation-pattern-message	(your failure message)

Confirm match

Example
Code

Type something

Type it again

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Type something</label>
<divclass="controls">
<inputtype="text"name="some_field"/>
<pclass="help-block"></p>
</div>
</div>
<divclass="control-group">
<labelclass="control-label">Type it again</label>
<divclass="controls">
<input
type="text"
data-validation-match-match="some_field"
name="some_other_field"
/>
<pclass="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

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

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Select your two favourite colours</label>
<divclass="controls">
<labelclass="checkbox">
<input
type="checkbox"
name="some_field"
data-validation-maxchecked-maxchecked="2"
data-validation-maxchecked-message="Don't be greedy!"
/>Red
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Orange
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Yellow
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Green
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Blue
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Indigo
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Violet
</label>
<pclass="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

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

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Select your two favourite colours</label>
<divclass="controls">
<labelclass="checkbox">
<input
type="checkbox"
name="some_field"
data-validation-minchecked-minchecked="2"
data-validation-minchecked-message="Choose at least two"
/>Red
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Orange
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Yellow
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Green
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Blue
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Indigo
</label>
<labelclass="checkbox">
<inputtype="checkbox"name="some_field"/>Violet
</label>
<pclass="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

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Select your two favourite colours</label>
<divclass="controls">
<input
type="text"
data-validation-regex-regex="a.*z"
data-validation-regex-message="Must start with 'a' and end with 'z'"
/>
<pclass="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>
functiondemo_callback_function($el,value,callback){
callback({
value:value,
valid:/a.*z/.test(value),
message:"Must start with 'a' and end with 'z'"
});
}
</script>
<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Type something</label>
<divclass="controls">
<input
type="text"
data-validation-callback-callback="demo_callback_function"
/>
<pclass="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

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Type something</label>
<divclass="controls">
<input
type="text"
name="ajax_input"
data-validation-ajax-ajax="/path/to/validator/script"
/>
<pclass="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

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Type a number</label>
<divclass="controls">
<inputtype="number"/>
<pclass="help-block"></p>
</div>
</div>
<divclass="form-actions">
</form>

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

Mix and multiply validators

Example
Code

<formclass="form-horizontal">
<divclass="control-group">
<labelclass="control-label">Type something</label>
<divclass="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"
/>
<pclass="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=10to use the maxlengthHTML5 validator, for example.

Navigation

Demos & Docs

Widgets

Contacts

Messages

Recent