login_validation.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. /* ------------------------------------------------------------------------------
  2. *
  3. * # Login form with validation
  4. *
  5. * Demo JS code for login_validation.html page
  6. *
  7. * ---------------------------------------------------------------------------- */
  8. // Setup module
  9. // ------------------------------
  10. var LoginValidation = function() {
  11. //
  12. // Setup module components
  13. //
  14. // Uniform
  15. var _componentUniform = function() {
  16. if (!$().uniform) {
  17. console.warn('Warning - uniform.min.js is not loaded.');
  18. return;
  19. }
  20. // Initialize
  21. $('.form-input-styled').uniform();
  22. };
  23. // Validation config
  24. var _componentValidation = function() {
  25. if (!$().validate) {
  26. console.warn('Warning - validate.min.js is not loaded.');
  27. return;
  28. }
  29. // Initialize
  30. var validator = $('.form-validate').validate({
  31. ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
  32. errorClass: 'validation-invalid-label',
  33. successClass: 'validation-valid-label',
  34. validClass: 'validation-valid-label',
  35. highlight: function(element, errorClass) {
  36. $(element).removeClass(errorClass);
  37. },
  38. unhighlight: function(element, errorClass) {
  39. $(element).removeClass(errorClass);
  40. },
  41. success: function(label) {
  42. label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
  43. },
  44. // Different components require proper error label placement
  45. errorPlacement: function(error, element) {
  46. // Unstyled checkboxes, radios
  47. if (element.parents().hasClass('form-check')) {
  48. error.appendTo( element.parents('.form-check').parent() );
  49. }
  50. // Input with icons and Select2
  51. else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
  52. error.appendTo( element.parent() );
  53. }
  54. // Input group, styled file input
  55. else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
  56. error.appendTo( element.parent().parent() );
  57. }
  58. // Other elements
  59. else {
  60. error.insertAfter(element);
  61. }
  62. },
  63. rules: {
  64. password: {
  65. minlength: 5
  66. }
  67. },
  68. messages: {
  69. username: "Enter your username",
  70. password: {
  71. required: "Enter your password",
  72. minlength: jQuery.validator.format("At least {0} characters required")
  73. }
  74. }
  75. });
  76. };
  77. //
  78. // Return objects assigned to module
  79. //
  80. return {
  81. init: function() {
  82. _componentUniform();
  83. _componentValidation();
  84. }
  85. }
  86. }();
  87. // Initialize module
  88. // ------------------------------
  89. document.addEventListener('DOMContentLoaded', function() {
  90. LoginValidation.init();
  91. });