You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
391 lines
14 KiB
391 lines
14 KiB
var FormValidationMd = 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-danger', form1);
|
|
var success1 = $('.alert-success', form1);
|
|
|
|
form1.validate({
|
|
errorElement: 'span', //default input error message container
|
|
errorClass: 'help-block help-block-error', // default input error message class
|
|
focusInvalid: false, // do not focus the last invalid input
|
|
ignore: "", // validate all fields including form hidden input
|
|
messages: {
|
|
payment: {
|
|
maxlength: jQuery.validator.format("Max {0} items allowed for selection"),
|
|
minlength: jQuery.validator.format("At least {0} items must be selected")
|
|
},
|
|
'checkboxes1[]': {
|
|
required: 'Please check some options',
|
|
minlength: jQuery.validator.format("At least {0} items must be selected"),
|
|
},
|
|
'checkboxes2[]': {
|
|
required: 'Please check some options',
|
|
minlength: jQuery.validator.format("At least {0} items must be selected"),
|
|
}
|
|
},
|
|
rules: {
|
|
name: {
|
|
minlength: 2,
|
|
required: true
|
|
},
|
|
email: {
|
|
required: true,
|
|
email: true
|
|
},
|
|
email2: {
|
|
required: true,
|
|
email: true
|
|
},
|
|
url: {
|
|
required: true,
|
|
url: true
|
|
},
|
|
url2: {
|
|
required: true,
|
|
url: true
|
|
},
|
|
number: {
|
|
required: true,
|
|
number: true
|
|
},
|
|
number2: {
|
|
required: true,
|
|
number: true
|
|
},
|
|
digits: {
|
|
required: true,
|
|
digits: true
|
|
},
|
|
creditcard: {
|
|
required: true,
|
|
creditcard: true
|
|
},
|
|
delivery: {
|
|
required: true
|
|
},
|
|
payment: {
|
|
required: true,
|
|
minlength: 2,
|
|
maxlength: 4
|
|
},
|
|
memo: {
|
|
required: true,
|
|
minlength: 10,
|
|
maxlength: 40
|
|
},
|
|
'checkboxes1[]': {
|
|
required: true,
|
|
minlength: 2,
|
|
},
|
|
'checkboxes2[]': {
|
|
required: true,
|
|
minlength: 3,
|
|
},
|
|
radio1: {
|
|
required: true
|
|
},
|
|
radio2: {
|
|
required: true
|
|
}
|
|
},
|
|
|
|
invalidHandler: function(event, validator) { //display error alert on form submit
|
|
success1.hide();
|
|
error1.show();
|
|
App.scrollTo(error1, -200);
|
|
},
|
|
|
|
errorPlacement: function(error, element) {
|
|
if (element.is(':checkbox')) {
|
|
error.insertAfter(element.closest(".md-checkbox-list, .md-checkbox-inline, .checkbox-list, .checkbox-inline"));
|
|
} else if (element.is(':radio')) {
|
|
error.insertAfter(element.closest(".md-radio-list, .md-radio-inline, .radio-list,.radio-inline"));
|
|
} else {
|
|
error.insertAfter(element); // for other inputs, just perform default behavior
|
|
}
|
|
},
|
|
|
|
highlight: function(element) { // hightlight error inputs
|
|
$(element)
|
|
.closest('.form-group').addClass('has-error'); // set error class to the control group
|
|
},
|
|
|
|
unhighlight: function(element) { // revert the change done by hightlight
|
|
$(element)
|
|
.closest('.form-group').removeClass('has-error'); // set error class to the control group
|
|
},
|
|
|
|
success: function(label) {
|
|
label
|
|
.closest('.form-group').removeClass('has-error'); // set success class to the control group
|
|
},
|
|
|
|
submitHandler: function(form) {
|
|
success1.show();
|
|
error1.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
var handleValidation2 = function() {
|
|
// for more info visit the official plugin documentation:
|
|
// http://docs.jquery.com/Plugins/Validation
|
|
var form1 = $('#form_sample_2');
|
|
var error1 = $('.alert-danger', form1);
|
|
var success1 = $('.alert-success', form1);
|
|
|
|
form1.validate({
|
|
errorElement: 'span', //default input error message container
|
|
errorClass: 'help-block help-block-error', // default input error message class
|
|
focusInvalid: false, // do not focus the last invalid input
|
|
ignore: "", // validate all fields including form hidden input
|
|
messages: {
|
|
payment: {
|
|
maxlength: jQuery.validator.format("Max {0} items allowed for selection"),
|
|
minlength: jQuery.validator.format("At least {0} items must be selected")
|
|
},
|
|
'checkboxes1[]': {
|
|
required: 'Please check some options',
|
|
minlength: jQuery.validator.format("At least {0} items must be selected"),
|
|
},
|
|
'checkboxes2[]': {
|
|
required: 'Please check some options',
|
|
minlength: jQuery.validator.format("At least {0} items must be selected"),
|
|
}
|
|
},
|
|
rules: {
|
|
name: {
|
|
minlength: 2,
|
|
required: true
|
|
},
|
|
email: {
|
|
required: true,
|
|
email: true
|
|
},
|
|
email2: {
|
|
required: true,
|
|
email: true
|
|
},
|
|
url: {
|
|
required: true,
|
|
url: true
|
|
},
|
|
url2: {
|
|
required: true,
|
|
url: true
|
|
},
|
|
number: {
|
|
required: true,
|
|
number: true
|
|
},
|
|
number2: {
|
|
required: true,
|
|
number: true
|
|
},
|
|
digits: {
|
|
required: true,
|
|
digits: true
|
|
},
|
|
creditcard: {
|
|
required: true,
|
|
creditcard: true
|
|
},
|
|
delivery: {
|
|
required: true
|
|
},
|
|
payment: {
|
|
required: true,
|
|
minlength: 2,
|
|
maxlength: 4
|
|
},
|
|
memo: {
|
|
required: true,
|
|
minlength: 10,
|
|
maxlength: 40
|
|
},
|
|
'checkboxes1[]': {
|
|
required: true,
|
|
minlength: 2,
|
|
},
|
|
'checkboxes2[]': {
|
|
required: true,
|
|
minlength: 3,
|
|
},
|
|
radio1: {
|
|
required: true
|
|
},
|
|
radio2: {
|
|
required: true
|
|
}
|
|
},
|
|
|
|
invalidHandler: function(event, validator) { //display error alert on form submit
|
|
success1.hide();
|
|
error1.show();
|
|
App.scrollTo(error1, -200);
|
|
},
|
|
|
|
errorPlacement: function(error, element) {
|
|
if (element.is(':checkbox')) {
|
|
error.insertAfter(element.closest(".md-checkbox-list, .md-checkbox-inline, .checkbox-list, .checkbox-inline"));
|
|
} else if (element.is(':radio')) {
|
|
error.insertAfter(element.closest(".md-radio-list, .md-radio-inline, .radio-list,.radio-inline"));
|
|
} else {
|
|
error.insertAfter(element); // for other inputs, just perform default behavior
|
|
}
|
|
},
|
|
|
|
highlight: function(element) { // hightlight error inputs
|
|
$(element)
|
|
.closest('.form-group').addClass('has-error'); // set error class to the control group
|
|
},
|
|
|
|
unhighlight: function(element) { // revert the change done by hightlight
|
|
$(element)
|
|
.closest('.form-group').removeClass('has-error'); // set error class to the control group
|
|
},
|
|
|
|
success: function(label) {
|
|
label
|
|
.closest('.form-group').removeClass('has-error'); // set success class to the control group
|
|
},
|
|
|
|
submitHandler: function(form) {
|
|
success1.show();
|
|
error1.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
var handleValidation3 = function() {
|
|
// for more info visit the official plugin documentation:
|
|
// http://docs.jquery.com/Plugins/Validation
|
|
var form1 = $('#form_sample_3');
|
|
var error1 = $('.alert-danger', form1);
|
|
var success1 = $('.alert-success', form1);
|
|
|
|
form1.validate({
|
|
errorElement: 'span', //default input error message container
|
|
errorClass: 'help-block help-block-error', // default input error message class
|
|
focusInvalid: false, // do not focus the last invalid input
|
|
ignore: "", // validate all fields including form hidden input
|
|
messages: {
|
|
payment: {
|
|
maxlength: jQuery.validator.format("Max {0} items allowed for selection"),
|
|
minlength: jQuery.validator.format("At least {0} items must be selected")
|
|
},
|
|
'checkboxes1[]': {
|
|
required: 'Please check some options',
|
|
minlength: jQuery.validator.format("At least {0} items must be selected"),
|
|
},
|
|
'checkboxes2[]': {
|
|
required: 'Please check some options',
|
|
minlength: jQuery.validator.format("At least {0} items must be selected"),
|
|
}
|
|
},
|
|
rules: {
|
|
name: {
|
|
minlength: 2,
|
|
required: true
|
|
},
|
|
email: {
|
|
required: true,
|
|
email: true
|
|
},
|
|
email2: {
|
|
required: true,
|
|
email: true
|
|
},
|
|
url: {
|
|
required: true,
|
|
url: true
|
|
},
|
|
url2: {
|
|
required: true,
|
|
url: true
|
|
},
|
|
number: {
|
|
required: true,
|
|
number: true
|
|
},
|
|
number2: {
|
|
required: true,
|
|
number: true
|
|
},
|
|
digits: {
|
|
required: true,
|
|
digits: true
|
|
},
|
|
creditcard: {
|
|
required: true,
|
|
creditcard: true
|
|
},
|
|
delivery: {
|
|
required: true
|
|
},
|
|
payment: {
|
|
required: true,
|
|
minlength: 2,
|
|
maxlength: 4
|
|
},
|
|
memo: {
|
|
required: true,
|
|
minlength: 10,
|
|
maxlength: 40
|
|
}
|
|
},
|
|
|
|
invalidHandler: function(event, validator) { //display error alert on form submit
|
|
success1.hide();
|
|
error1.show();
|
|
App.scrollTo(error1, -200);
|
|
},
|
|
|
|
errorPlacement: function(error, element) {
|
|
if (element.is(':checkbox')) {
|
|
error.insertAfter(element.closest(".md-checkbox-list, .md-checkbox-inline, .checkbox-list, .checkbox-inline"));
|
|
} else if (element.is(':radio')) {
|
|
error.insertAfter(element.closest(".md-radio-list, .md-radio-inline, .radio-list,.radio-inline"));
|
|
} else {
|
|
error.insertAfter(element); // for other inputs, just perform default behavior
|
|
}
|
|
},
|
|
|
|
highlight: function(element) { // hightlight error inputs
|
|
$(element)
|
|
.closest('.form-group').addClass('has-error'); // set error class to the control group
|
|
},
|
|
|
|
unhighlight: function(element) { // revert the change done by hightlight
|
|
$(element)
|
|
.closest('.form-group').removeClass('has-error'); // set error class to the control group
|
|
},
|
|
|
|
success: function(label) {
|
|
label
|
|
.closest('.form-group').removeClass('has-error'); // set success class to the control group
|
|
},
|
|
|
|
submitHandler: function(form) {
|
|
success1.show();
|
|
error1.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
return {
|
|
//main function to initiate the module
|
|
init: function() {
|
|
handleValidation1();
|
|
handleValidation2();
|
|
handleValidation3();
|
|
}
|
|
};
|
|
}();
|
|
|
|
jQuery(document).ready(function() {
|
|
FormValidationMd.init();
|
|
});
|