mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2024-11-10 15:40:28 +00:00
341 lines
14 KiB
JavaScript
341 lines
14 KiB
JavaScript
|
var FormValidation = function () {
|
||
|
|
|
||
|
|
// basic validation
|
||
|
|
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: {
|
||
|
|
select_multi: {
|
||
|
|
maxlength: jQuery.validator.format("Max {0} items allowed for selection"),
|
||
|
|
minlength: jQuery.validator.format("At least {0} items must be selected")
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
select: {
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
select_multi: {
|
||
|
|
required: true,
|
||
|
|
minlength: 1,
|
||
|
|
maxlength: 3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
invalidHandler: function (event, validator) { //display error alert on form submit
|
||
|
|
success1.hide();
|
||
|
|
error1.show();
|
||
|
|
Metronic.scrollTo(error1, -200);
|
||
|
|
},
|
||
|
|
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// validation using icons
|
||
|
|
var handleValidation2 = function() {
|
||
|
|
// for more info visit the official plugin documentation:
|
||
|
|
// http://docs.jquery.com/Plugins/Validation
|
||
|
|
|
||
|
|
var form2 = $('#form_sample_2');
|
||
|
|
var error2 = $('.alert-danger', form2);
|
||
|
|
var success2 = $('.alert-success', form2);
|
||
|
|
|
||
|
|
form2.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
|
||
|
|
rules: {
|
||
|
|
name: {
|
||
|
|
minlength: 2,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
email: {
|
||
|
|
required: true,
|
||
|
|
email: 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
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
invalidHandler: function (event, validator) { //display error alert on form submit
|
||
|
|
success2.hide();
|
||
|
|
error2.show();
|
||
|
|
Metronic.scrollTo(error2, -200);
|
||
|
|
},
|
||
|
|
|
||
|
|
errorPlacement: function (error, element) { // render error placement for each input type
|
||
|
|
var icon = $(element).parent('.input-icon').children('i');
|
||
|
|
icon.removeClass('fa-check').addClass("fa-warning");
|
||
|
|
icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
|
||
|
|
},
|
||
|
|
|
||
|
|
highlight: function (element) { // hightlight error inputs
|
||
|
|
$(element)
|
||
|
|
.closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group
|
||
|
|
},
|
||
|
|
|
||
|
|
unhighlight: function (element) { // revert the change done by hightlight
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
success: function (label, element) {
|
||
|
|
var icon = $(element).parent('.input-icon').children('i');
|
||
|
|
$(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
|
||
|
|
icon.removeClass("fa-warning").addClass("fa-check");
|
||
|
|
},
|
||
|
|
|
||
|
|
submitHandler: function (form) {
|
||
|
|
success2.show();
|
||
|
|
error2.hide();
|
||
|
|
form[0].submit(); // submit the form
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// advance validation
|
||
|
|
var handleValidation3 = function() {
|
||
|
|
// for more info visit the official plugin documentation:
|
||
|
|
// http://docs.jquery.com/Plugins/Validation
|
||
|
|
|
||
|
|
var form3 = $('#form_sample_3');
|
||
|
|
var error3 = $('.alert-danger', form3);
|
||
|
|
var success3 = $('.alert-success', form3);
|
||
|
|
|
||
|
|
//IMPORTANT: update CKEDITOR textarea with actual content before submit
|
||
|
|
form3.on('submit', function() {
|
||
|
|
for(var instanceName in CKEDITOR.instances) {
|
||
|
|
CKEDITOR.instances[instanceName].updateElement();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
form3.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
|
||
|
|
rules: {
|
||
|
|
name: {
|
||
|
|
minlength: 2,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
email: {
|
||
|
|
required: true,
|
||
|
|
email: true
|
||
|
|
},
|
||
|
|
options1: {
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
options2: {
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
select2tags: {
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
datepicker: {
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
occupation: {
|
||
|
|
minlength: 5,
|
||
|
|
},
|
||
|
|
membership: {
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
service: {
|
||
|
|
required: true,
|
||
|
|
minlength: 2
|
||
|
|
},
|
||
|
|
markdown: {
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
editor1: {
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
editor2: {
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
messages: { // custom messages for radio buttons and checkboxes
|
||
|
|
membership: {
|
||
|
|
required: "Please select a Membership type"
|
||
|
|
},
|
||
|
|
service: {
|
||
|
|
required: "Please select at least 2 types of Service",
|
||
|
|
minlength: jQuery.validator.format("Please select at least {0} types of Service")
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
errorPlacement: function (error, element) { // render error placement for each input type
|
||
|
|
if (element.parent(".input-group").size() > 0) {
|
||
|
|
error.insertAfter(element.parent(".input-group"));
|
||
|
|
} else if (element.attr("data-error-container")) {
|
||
|
|
error.appendTo(element.attr("data-error-container"));
|
||
|
|
} else if (element.parents('.radio-list').size() > 0) {
|
||
|
|
error.appendTo(element.parents('.radio-list').attr("data-error-container"));
|
||
|
|
} else if (element.parents('.radio-inline').size() > 0) {
|
||
|
|
error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
|
||
|
|
} else if (element.parents('.checkbox-list').size() > 0) {
|
||
|
|
error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
|
||
|
|
} else if (element.parents('.checkbox-inline').size() > 0) {
|
||
|
|
error.appendTo(element.parents('.checkbox-inline').attr("data-error-container"));
|
||
|
|
} else {
|
||
|
|
error.insertAfter(element); // for other inputs, just perform default behavior
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
invalidHandler: function (event, validator) { //display error alert on form submit
|
||
|
|
success3.hide();
|
||
|
|
error3.show();
|
||
|
|
Metronic.scrollTo(error3, -200);
|
||
|
|
},
|
||
|
|
|
||
|
|
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) {
|
||
|
|
success3.show();
|
||
|
|
error3.hide();
|
||
|
|
form[0].submit(); // submit the form
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
//apply validation on select2 dropdown value change, this only needed for chosen dropdown integration.
|
||
|
|
$('.select2me', form3).change(function () {
|
||
|
|
form3.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
|
||
|
|
});
|
||
|
|
|
||
|
|
// initialize select2 tags
|
||
|
|
$("#select2_tags").change(function() {
|
||
|
|
form3.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
|
||
|
|
}).select2({
|
||
|
|
tags: ["red", "green", "blue", "yellow", "pink"]
|
||
|
|
});
|
||
|
|
|
||
|
|
//initialize datepicker
|
||
|
|
$('.date-picker').datepicker({
|
||
|
|
rtl: Metronic.isRTL(),
|
||
|
|
autoclose: true
|
||
|
|
});
|
||
|
|
$('.date-picker .form-control').change(function() {
|
||
|
|
form3.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
var handleWysihtml5 = function() {
|
||
|
|
if (!jQuery().wysihtml5) {
|
||
|
|
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ($('.wysihtml5').size() > 0) {
|
||
|
|
$('.wysihtml5').wysihtml5({
|
||
|
|
"stylesheets": ["../../assets/global/plugins/bootstrap-wysihtml5/wysiwyg-color.css"]
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
//main function to initiate the module
|
||
|
|
init: function () {
|
||
|
|
|
||
|
|
handleWysihtml5();
|
||
|
|
handleValidation1();
|
||
|
|
handleValidation2();
|
||
|
|
handleValidation3();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
}();
|