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.
191 lines
5.2 KiB
191 lines
5.2 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Form validation |
|
* |
|
* Specific JS code additions for form_validation.html page |
|
* |
|
* Version: 1.3 |
|
* Latest update: Feb 5, 2016 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
$(function() { |
|
|
|
|
|
// Form components |
|
// ------------------------------ |
|
|
|
// Switchery toggles |
|
var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery')); |
|
elems.forEach(function(html) { |
|
var switchery = new Switchery(html); |
|
}); |
|
|
|
|
|
// Bootstrap switch |
|
$(".switch").bootstrapSwitch(); |
|
|
|
|
|
// Bootstrap multiselect |
|
$('.multiselect').multiselect({ |
|
checkboxName: 'vali' |
|
}); |
|
|
|
|
|
// Touchspin |
|
$(".touchspin-postfix").TouchSpin({ |
|
min: 0, |
|
max: 100, |
|
step: 0.1, |
|
decimals: 2, |
|
postfix: '%' |
|
}); |
|
|
|
|
|
// Select2 select |
|
$('.select').select2({ |
|
minimumResultsForSearch: Infinity |
|
}); |
|
|
|
|
|
// Styled checkboxes, radios |
|
$(".styled, .multiselect-container input").uniform({ radioClass: 'choice' }); |
|
|
|
|
|
// Styled file input |
|
$(".file-styled").uniform({ |
|
fileButtonClass: 'action btn bg-blue' |
|
}); |
|
|
|
|
|
|
|
// Setup validation |
|
// ------------------------------ |
|
|
|
// Initialize |
|
var validator = $(".form-validate-jquery").validate({ |
|
ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields |
|
errorClass: 'validation-error-label', |
|
successClass: 'validation-valid-label', |
|
highlight: function(element, errorClass) { |
|
$(element).removeClass(errorClass); |
|
}, |
|
unhighlight: function(element, errorClass) { |
|
$(element).removeClass(errorClass); |
|
}, |
|
|
|
// Different components require proper error label placement |
|
errorPlacement: function(error, element) { |
|
|
|
// Styled checkboxes, radios, bootstrap switch |
|
if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container') ) { |
|
if(element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) { |
|
error.appendTo( element.parent().parent().parent().parent() ); |
|
} |
|
else { |
|
error.appendTo( element.parent().parent().parent().parent().parent() ); |
|
} |
|
} |
|
|
|
// Unstyled checkboxes, radios |
|
else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) { |
|
error.appendTo( element.parent().parent().parent() ); |
|
} |
|
|
|
// Input with icons and Select2 |
|
else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) { |
|
error.appendTo( element.parent() ); |
|
} |
|
|
|
// Inline checkboxes, radios |
|
else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) { |
|
error.appendTo( element.parent().parent() ); |
|
} |
|
|
|
// Input group, styled file input |
|
else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) { |
|
error.appendTo( element.parent().parent() ); |
|
} |
|
|
|
else { |
|
error.insertAfter(element); |
|
} |
|
}, |
|
validClass: "validation-valid-label", |
|
success: function(label) { |
|
label.addClass("validation-valid-label").text("Success.") |
|
}, |
|
rules: { |
|
password: { |
|
minlength: 5 |
|
}, |
|
repeat_password: { |
|
equalTo: "#password" |
|
}, |
|
email: { |
|
email: true |
|
}, |
|
repeat_email: { |
|
equalTo: "#email" |
|
}, |
|
minimum_characters: { |
|
minlength: 10 |
|
}, |
|
maximum_characters: { |
|
maxlength: 10 |
|
}, |
|
minimum_number: { |
|
min: 10 |
|
}, |
|
maximum_number: { |
|
max: 10 |
|
}, |
|
number_range: { |
|
range: [10, 20] |
|
}, |
|
url: { |
|
url: true |
|
}, |
|
date: { |
|
date: true |
|
}, |
|
date_iso: { |
|
dateISO: true |
|
}, |
|
numbers: { |
|
number: true |
|
}, |
|
digits: { |
|
digits: true |
|
}, |
|
creditcard: { |
|
creditcard: true |
|
}, |
|
basic_checkbox: { |
|
minlength: 2 |
|
}, |
|
styled_checkbox: { |
|
minlength: 2 |
|
}, |
|
switchery_group: { |
|
minlength: 2 |
|
}, |
|
switch_group: { |
|
minlength: 2 |
|
} |
|
}, |
|
messages: { |
|
custom: { |
|
required: "This is a custom error message", |
|
}, |
|
agree: "Please accept our policy" |
|
} |
|
}); |
|
|
|
|
|
// Reset form |
|
$('#reset').on('click', function() { |
|
validator.resetForm(); |
|
}); |
|
|
|
});
|
|
|