forked from davidnguyen/bootstrap-validate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
bootstrap.validate.js
104 lines (97 loc) · 3.95 KB
/
bootstrap.validate.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/*
* Bootstrap Validate Scriptlet that supports Twitter Bootstrap styling to
* jQuery validate and unobstrusive jQuery validate
* Author: David Nguyen ([email protected])
* Author: Debbie-Ann Facey ([email protected])
*/
(function ($) {
"use strict";
var elements = {
fieldValidationSpanAll: 'span.field-validation-valid, span.field-validation-error',
fieldValidationSpanError: 'span.field-validation-error',
inputValidationError: '.input-validation-error',
controlGroupDiv: 'div.form-group',
form: 'form',
formInput: 'form input, form select, form textarea'
},
classes = {
inlineHelp: 'help-inline',
error: 'has-error'
},
addInlineHelp = function () {
/// <summary>Adds inline-help classes</summary>
$(this).addClass(classes.inlineHelp);
},
addErrorClasses = function ($form) {
/// <summary>Add bootstrap validation styles on a form</summary>
$form.find(elements.controlGroupDiv).each(function () {
if ($(this).find(elements.inputValidationError).length > 0) {
$(this).addClass(classes.error);
}
});
},
removeErrorClasses = function ($form) {
/// <summary>Remove bootstrap validation styles from a form</summary>
$form.find(elements.controlGroupDiv).each(function () {
if ($(this).find(elements.inputValidationError).length === 0) {
$(this).removeClass(classes.error);
}
});
},
validateAndUpdateClasses = function ($form) {
var isFormValid = $form.valid();
/// <summary>Add or removes bootstrap validation styles on a form</summary>
if (isFormValid) {
removeErrorClasses($form);
}
else {
addErrorClasses($form);
}
return isFormValid;
},
onFormSubmit = function () {
/// <summary>Handles form submit event</summary>
return validateAndUpdateClasses($(this));
},
onFormInputChange = function () {
/// <summary>Handles form input change event</summary>
var $controlGroup = $(this).parents(elements.controlGroupDiv);
// The delay leaves jquery validate some time to insert the validation error
setTimeout(function () {
if ($controlGroup.find(elements.inputValidationError).length === 0) {
$controlGroup.removeClass(classes.error);
} else {
$controlGroup.addClass(classes.error);
}
}, 500);
},
initBootstrapValidation = function () {
/// <summary>Initialises BootstrapValidate module to add support for Twitter Bootstrap to jQuery validate</summary>
$(elements.fieldValidationSpanAll).each(addInlineHelp);
$(elements.form).off('submit', onFormSubmit).on('submit', onFormSubmit);
$(elements.formInput).off('change', onFormInputChange).on('change', onFormInputChange);
$(elements.formInput).off('keyup', onFormInputChange).on('keyup', onFormInputChange);
$(elements.formInput).off('blur', onFormInputChange).on('blur', onFormInputChange);
//Highlight error inputs that have been initialised (e.g. part of initial page load)
$(elements.form).each(function (index, form) { addErrorClasses($(form)); });
},
init = function () {
// Initialise on page load
$(function () {
initBootstrapValidation();
});
// Initialise after Ajax request
$(document).ajaxStop(function () {
initBootstrapValidation();
});
// Add global functions that adds bootstrap styles to form.
// This is useful if validation should be triggered without a form submission
// e.g. to validate steps in a form wizard before submission
window.bootstrapValidate = {
formValid: validateAndUpdateClasses
};
};
return {
init: init
};
}(jQuery)).init();