foundation.abide.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. ;(function ($, window, document, undefined) {
  2. 'use strict';
  3. Foundation.libs.abide = {
  4. name : 'abide',
  5. version : '5.0.0',
  6. settings : {
  7. focus_on_invalid : true,
  8. timeout : 1000,
  9. patterns : {
  10. alpha: /[a-zA-Z]+/,
  11. alpha_numeric : /[a-zA-Z0-9]+/,
  12. integer: /-?\d+/,
  13. number: /-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?/,
  14. // generic password: upper-case, lower-case, number/special character, and min 8 characters
  15. password : /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/,
  16. // amex, visa, diners
  17. card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
  18. cvv : /^([0-9]){3,4}$/,
  19. // http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
  20. email : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
  21. url: /(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?/,
  22. // abc.de
  23. domain: /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$/,
  24. datetime: /([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))/,
  25. // YYYY-MM-DD
  26. date: /(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))/,
  27. // HH:MM:SS
  28. time : /(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}/,
  29. dateISO: /\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}/,
  30. // MM/DD/YYYY
  31. month_day_year : /(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d/,
  32. // #FFF or #FFFFFF
  33. color: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
  34. }
  35. },
  36. timer : null,
  37. init : function (scope, method, options) {
  38. this.bindings(method, options);
  39. },
  40. events : function (scope) {
  41. var self = this,
  42. form = $(scope).attr('novalidate', 'novalidate'),
  43. settings = form.data('abide-init');
  44. form
  45. .off('.abide')
  46. .on('submit.fndtn.abide validate.fndtn.abide', function (e) {
  47. var is_ajax = /ajax/i.test($(this).attr('data-abide'));
  48. return self.validate($(this).find('input, textarea, select').get(), e, is_ajax);
  49. })
  50. .find('input, textarea, select')
  51. .off('.abide')
  52. .on('blur.fndtn.abide change.fndtn.abide', function (e) {
  53. self.validate([this], e);
  54. })
  55. .on('keydown.fndtn.abide', function (e) {
  56. var settings = $(this).closest('form').data('abide-init');
  57. clearTimeout(self.timer);
  58. self.timer = setTimeout(function () {
  59. self.validate([this], e);
  60. }.bind(this), settings.timeout);
  61. });
  62. },
  63. validate : function (els, e, is_ajax) {
  64. var validations = this.parse_patterns(els),
  65. validation_count = validations.length,
  66. form = $(els[0]).closest('form'),
  67. submit_event = /submit/.test(e.type);
  68. for (var i=0; i < validation_count; i++) {
  69. if (!validations[i] && (submit_event || is_ajax)) {
  70. if (this.settings.focus_on_invalid) els[i].focus();
  71. form.trigger('invalid');
  72. $(els[i]).closest('form').attr('data-invalid', '');
  73. return false;
  74. }
  75. }
  76. if (submit_event || is_ajax) {
  77. form.trigger('valid');
  78. }
  79. form.removeAttr('data-invalid');
  80. if (is_ajax) return false;
  81. return true;
  82. },
  83. parse_patterns : function (els) {
  84. var count = els.length,
  85. el_patterns = [];
  86. for (var i = count - 1; i >= 0; i--) {
  87. el_patterns.push(this.pattern(els[i]));
  88. }
  89. return this.check_validation_and_apply_styles(el_patterns);
  90. },
  91. pattern : function (el) {
  92. var type = el.getAttribute('type'),
  93. required = typeof el.getAttribute('required') === 'string';
  94. if (this.settings.patterns.hasOwnProperty(type)) {
  95. return [el, this.settings.patterns[type], required];
  96. }
  97. var pattern = el.getAttribute('pattern') || '';
  98. if (this.settings.patterns.hasOwnProperty(pattern) && pattern.length > 0) {
  99. return [el, this.settings.patterns[pattern], required];
  100. } else if (pattern.length > 0) {
  101. return [el, new RegExp(pattern), required];
  102. }
  103. pattern = /.*/;
  104. return [el, pattern, required];
  105. },
  106. check_validation_and_apply_styles : function (el_patterns) {
  107. var count = el_patterns.length,
  108. validations = [];
  109. for (var i = count - 1; i >= 0; i--) {
  110. var el = el_patterns[i][0],
  111. required = el_patterns[i][2],
  112. value = el.value,
  113. is_equal = el.getAttribute('data-equalto'),
  114. is_radio = el.type === "radio",
  115. valid_length = (required) ? (el.value.length > 0) : true;
  116. if (is_radio && required) {
  117. validations.push(this.valid_radio(el, required));
  118. } else if (is_equal && required) {
  119. validations.push(this.valid_equal(el, required));
  120. } else {
  121. if (el_patterns[i][1].test(value) && valid_length ||
  122. !required && el.value.length < 1) {
  123. $(el).removeAttr('data-invalid').parent().removeClass('error');
  124. validations.push(true);
  125. } else {
  126. $(el).attr('data-invalid', '').parent().addClass('error');
  127. validations.push(false);
  128. }
  129. }
  130. }
  131. return validations;
  132. },
  133. valid_radio : function (el, required) {
  134. var name = el.getAttribute('name'),
  135. group = document.getElementsByName(name),
  136. count = group.length,
  137. valid = false;
  138. for (var i=0; i < count; i++) {
  139. if (group[i].checked) valid = true;
  140. }
  141. for (var i=0; i < count; i++) {
  142. if (valid) {
  143. $(group[i]).removeAttr('data-invalid').parent().removeClass('error');
  144. } else {
  145. $(group[i]).attr('data-invalid', '').parent().addClass('error');
  146. }
  147. }
  148. return valid;
  149. },
  150. valid_equal: function(el, required) {
  151. var from = document.getElementById(el.getAttribute('data-equalto')).value,
  152. to = el.value,
  153. valid = (from === to);
  154. if (valid) {
  155. $(el).removeAttr('data-invalid').parent().removeClass('error');
  156. } else {
  157. $(el).attr('data-invalid', '').parent().addClass('error');
  158. }
  159. return valid;
  160. }
  161. };
  162. }(jQuery, this, this.document));