form-validation.js
3.4 KB
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
var FormValidation = function () {
var handleValidation1 = function() {
// for more info visit the official plugin documentation:
// http://docs.jquery.com/Plugins/Validation
var form1 = $('#form_sample_1');
var error1 = $('.alert-error', form1);
var success1 = $('.alert-success', form1);
form1.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
url: {
required: true,
url: true
},
number: {
required: true,
number: true
},
digits: {
required: true,
digits: true
},
creditcard: {
required: true,
creditcard: true
},
occupation: {
minlength: 5,
},
category: {
required: true
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
success1.hide();
error1.show();
FormValidation.scrollTo(error1, -200);
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.help-inline').removeClass('ok'); // display OK icon
$(element)
.closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.control-group').removeClass('error'); // set error class to the control group
},
success: function (label) {
label
.addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
.closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
},
submitHandler: function (form) {
success1.show();
error1.hide();
}
});
}
return {
//main function to initiate the module
init: function () {
handleValidation1();
},
// wrapper function to scroll to an element
scrollTo: function (el, offeset) {
pos = el ? el.offset().top : 0;
jQuery('html,body').animate({
scrollTop: pos + (offeset ? offeset : 0)
}, 'slow');
}
};
}();