Add frontend assets and plugin bundles
Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
This commit is contained in:
227
assets/js/form-validation.js
Normal file
227
assets/js/form-validation.js
Normal file
@@ -0,0 +1,227 @@
|
||||
var FormValidator = function () {
|
||||
// function to initiate Validation Sample 1
|
||||
var runValidator1 = function () {
|
||||
var form1 = $('#form');
|
||||
var errorHandler1 = $('.errorHandler', form1);
|
||||
var successHandler1 = $('.successHandler', form1);
|
||||
$.validator.addMethod("FullDate", function () {
|
||||
//if all values are selected
|
||||
if ($("#dd").val() != "" && $("#mm").val() != "" && $("#yyyy").val() != "") {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}, 'Please select a day, month, and year');
|
||||
$('#form').validate({
|
||||
errorElement: "span", // contain the error msg in a span tag
|
||||
errorClass: 'help-block',
|
||||
errorPlacement: function (error, element) { // render error placement for each input type
|
||||
if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
|
||||
error.insertAfter($(element).closest('.form-group').children('div').children().last());
|
||||
} else if (element.attr("name") == "dd" || element.attr("name") == "mm" || element.attr("name") == "yyyy") {
|
||||
error.insertAfter($(element).closest('.form-group').children('div'));
|
||||
} else {
|
||||
error.insertAfter(element);
|
||||
// for other inputs, just perform default behavior
|
||||
}
|
||||
},
|
||||
ignore: "",
|
||||
rules: {
|
||||
firstname: {
|
||||
minlength: 2,
|
||||
required: true
|
||||
},
|
||||
lastname: {
|
||||
minlength: 2,
|
||||
required: true
|
||||
},
|
||||
email: {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
password: {
|
||||
minlength: 6,
|
||||
required: true
|
||||
},
|
||||
password_again: {
|
||||
required: true,
|
||||
minlength: 5,
|
||||
equalTo: "#password"
|
||||
},
|
||||
yyyy: "FullDate",
|
||||
gender: {
|
||||
required: true
|
||||
},
|
||||
zipcode: {
|
||||
required: true,
|
||||
number: true,
|
||||
minlength: 5,
|
||||
minlength: 5
|
||||
},
|
||||
city: {
|
||||
required: true
|
||||
},
|
||||
newsletter: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
firstname: "Please specify your first name",
|
||||
lastname: "Please specify your last name",
|
||||
email: {
|
||||
required: "We need your email address to contact you",
|
||||
email: "Your email address must be in the format of name@domain.com"
|
||||
},
|
||||
gender: "Please check a gender!"
|
||||
},
|
||||
groups: {
|
||||
DateofBirth: "dd mm yyyy",
|
||||
},
|
||||
invalidHandler: function (event, validator) { //display error alert on form submit
|
||||
successHandler1.hide();
|
||||
errorHandler1.show();
|
||||
},
|
||||
highlight: function (element) {
|
||||
$(element).closest('.help-block').removeClass('valid');
|
||||
// display OK icon
|
||||
$(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
|
||||
// add the Bootstrap 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, element) {
|
||||
label.addClass('help-block valid');
|
||||
// mark the current input as valid and display OK icon
|
||||
$(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
|
||||
},
|
||||
submitHandler: function (form) {
|
||||
successHandler1.show();
|
||||
errorHandler1.hide();
|
||||
}
|
||||
});
|
||||
};
|
||||
// function to initiate Validation Sample 2
|
||||
var runValidator2 = function () {
|
||||
var form2 = $('#form2');
|
||||
var errorHandler2 = $('.errorHandler', form2);
|
||||
var successHandler2 = $('.successHandler', form2);
|
||||
$.validator.addMethod("getEditorValue", function () {
|
||||
$("#editor1").val($('.summernote').code());
|
||||
if ($("#editor1").val() != "" && $("#editor1").val() != "<br>") {
|
||||
$('#editor1').val('');
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}, 'This field is required.');
|
||||
form2.validate({
|
||||
errorElement: "span", // contain the error msg in a small tag
|
||||
errorClass: 'help-block',
|
||||
errorPlacement: function (error, element) { // render error placement for each input type
|
||||
if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
|
||||
error.insertAfter($(element).closest('.form-group').children('div').children().last());
|
||||
} else if (element.hasClass("ckeditor")) {
|
||||
error.appendTo($(element).closest('.form-group'));
|
||||
} else {
|
||||
error.insertAfter(element);
|
||||
// for other inputs, just perform default behavior
|
||||
}
|
||||
},
|
||||
ignore: "",
|
||||
rules: {
|
||||
firstname2: {
|
||||
minlength: 2,
|
||||
required: true
|
||||
},
|
||||
lastname2: {
|
||||
minlength: 2,
|
||||
required: true
|
||||
},
|
||||
email2: {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
occupation: {
|
||||
required: true
|
||||
},
|
||||
dropdown: {
|
||||
required: true
|
||||
},
|
||||
services: {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
creditcard: {
|
||||
required: true,
|
||||
creditcard: true
|
||||
},
|
||||
url: {
|
||||
required: true,
|
||||
url: true
|
||||
},
|
||||
zipcode2: {
|
||||
required: true,
|
||||
number: true,
|
||||
minlength: 5,
|
||||
minlength: 5
|
||||
},
|
||||
city2: {
|
||||
required: true
|
||||
},
|
||||
editor1: "getEditorValue",
|
||||
editor2: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
firstname: "Please specify your first name",
|
||||
lastname: "Please specify your last name",
|
||||
email: {
|
||||
required: "We need your email address to contact you",
|
||||
email: "Your email address must be in the format of name@domain.com"
|
||||
},
|
||||
services: {
|
||||
minlength: jQuery.format("Please select at least {0} types of Service")
|
||||
}
|
||||
},
|
||||
invalidHandler: function (event, validator) { //display error alert on form submit
|
||||
successHandler2.hide();
|
||||
errorHandler2.show();
|
||||
},
|
||||
highlight: function (element) {
|
||||
$(element).closest('.help-block').removeClass('valid');
|
||||
// display OK icon
|
||||
$(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
|
||||
// add the Bootstrap 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, element) {
|
||||
label.addClass('help-block valid');
|
||||
// mark the current input as valid and display OK icon
|
||||
$(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
|
||||
},
|
||||
submitHandler: function (form) {
|
||||
successHandler2.show();
|
||||
errorHandler2.hide();
|
||||
}
|
||||
});
|
||||
$('.summernote').summernote({
|
||||
height: 300,
|
||||
tabsize: 2
|
||||
});
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
$('textarea.ckeditor').ckeditor();
|
||||
};
|
||||
return {
|
||||
//main function to initiate template pages
|
||||
init: function () {
|
||||
runValidator1();
|
||||
runValidator2();
|
||||
}
|
||||
};
|
||||
}();
|
||||
Reference in New Issue
Block a user