foundation.abide.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. ;(function ($, window, document, undefined) {
  2. 'use strict';
  3. Foundation.libs.abide = {
  4. name : 'abide',
  5. version : '5.2.2',
  6. settings : {
  7. live_validate : true,
  8. focus_on_invalid : true,
  9. error_labels: true, // labels with a for="inputId" will recieve an `error` class
  10. timeout : 1000,
  11. patterns : {
  12. alpha: /^[a-zA-Z]+$/,
  13. alpha_numeric : /^[a-zA-Z0-9]+$/,
  14. integer: /^[-+]?\d+$/,
  15. number: /^[-+]?\d*(?:\.\d+)?$/,
  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. validators : {
  36. equalTo: function(el, required, parent) {
  37. var from = document.getElementById(el.getAttribute(this.add_namespace('data-equalto'))).value,
  38. to = el.value,
  39. valid = (from === to);
  40. return valid;
  41. }
  42. }
  43. },
  44. timer : null,
  45. init : function (scope, method, options) {
  46. this.bindings(method, options);
  47. },
  48. events : function (scope) {
  49. var self = this,
  50. form = self.S(scope).attr('novalidate', 'novalidate'),
  51. settings = form.data(this.attr_name(true) + '-init') || {};
  52. this.invalid_attr = this.add_namespace('data-invalid');
  53. form
  54. .off('.abide')
  55. .on('submit.fndtn.abide validate.fndtn.abide', function (e) {
  56. var is_ajax = /ajax/i.test(self.S(this).attr(self.attr_name()));
  57. return self.validate(self.S(this).find('input, textarea, select').get(), e, is_ajax);
  58. })
  59. .on('reset', function() {
  60. return self.reset($(this));
  61. })
  62. .find('input, textarea, select')
  63. .off('.abide')
  64. .on('blur.fndtn.abide change.fndtn.abide', function (e) {
  65. self.validate([this], e);
  66. })
  67. .on('keydown.fndtn.abide', function (e) {
  68. if (settings.live_validate === true) {
  69. clearTimeout(self.timer);
  70. self.timer = setTimeout(function () {
  71. self.validate([this], e);
  72. }.bind(this), settings.timeout);
  73. }
  74. });
  75. },
  76. reset : function (form) {
  77. form.removeAttr(this.invalid_attr);
  78. $(this.invalid_attr, form).removeAttr(this.invalid_attr);
  79. $('.error', form).not('small').removeClass('error');
  80. },
  81. validate : function (els, e, is_ajax) {
  82. var validations = this.parse_patterns(els),
  83. validation_count = validations.length,
  84. form = this.S(els[0]).closest('[data-' + this.attr_name(true) + ']'),
  85. settings = form.data(this.attr_name(true) + '-init') || {},
  86. submit_event = /submit/.test(e.type);
  87. form.trigger('validated');
  88. // Has to count up to make sure the focus gets applied to the top error
  89. for (var i=0; i < validation_count; i++) {
  90. if (!validations[i] && (submit_event || is_ajax)) {
  91. if (settings.focus_on_invalid) els[i].focus();
  92. form.trigger('invalid');
  93. this.S(els[i]).closest('[data-' + this.attr_name(true) + ']').attr(this.invalid_attr, '');
  94. return false;
  95. }
  96. }
  97. if (submit_event || is_ajax) {
  98. form.trigger('valid');
  99. }
  100. form.removeAttr(this.invalid_attr);
  101. if (is_ajax) return false;
  102. return true;
  103. },
  104. parse_patterns : function (els) {
  105. var i = els.length,
  106. el_patterns = [];
  107. while (i--) {
  108. el_patterns.push(this.pattern(els[i]));
  109. }
  110. return this.check_validation_and_apply_styles(el_patterns);
  111. },
  112. pattern : function (el) {
  113. var type = el.getAttribute('type'),
  114. required = typeof el.getAttribute('required') === 'string';
  115. var pattern = el.getAttribute('pattern') || '';
  116. if (this.settings.patterns.hasOwnProperty(pattern) && pattern.length > 0) {
  117. return [el, this.settings.patterns[pattern], required];
  118. } else if (pattern.length > 0) {
  119. return [el, new RegExp('^'+pattern+'$'), required];
  120. }
  121. if (this.settings.patterns.hasOwnProperty(type)) {
  122. return [el, this.settings.patterns[type], required];
  123. }
  124. pattern = /.*/;
  125. return [el, pattern, required];
  126. },
  127. check_validation_and_apply_styles : function (el_patterns) {
  128. var i = el_patterns.length,
  129. validations = [],
  130. form = this.S(el_patterns[0][0]).closest('[data-' + this.attr_name(true) + ']'),
  131. settings = form.data(this.attr_name(true) + '-init') || {};
  132. while (i--) {
  133. var el = el_patterns[i][0],
  134. required = el_patterns[i][2],
  135. value = el.value,
  136. direct_parent = this.S(el).parent(),
  137. validator = el.getAttribute(this.add_namespace('data-abide-validator')),
  138. is_radio = el.type === "radio",
  139. is_checkbox = el.type === "checkbox",
  140. label = this.S('label[for="' + el.getAttribute('id') + '"]'),
  141. valid_length = (required) ? (el.value.length > 0) : true;
  142. var parent, valid;
  143. // support old way to do equalTo validations
  144. if(el.getAttribute(this.add_namespace('data-equalto'))) { validator = "equalTo" }
  145. if (!direct_parent.is('label')) {
  146. parent = direct_parent;
  147. } else {
  148. parent = direct_parent.parent();
  149. }
  150. if (is_radio && required) {
  151. validations.push(this.valid_radio(el, required));
  152. } else if (is_checkbox && required) {
  153. validations.push(this.valid_checkbox(el, required));
  154. } else if (validator) {
  155. valid = this.settings.validators[validator].apply(this, [el, required, parent])
  156. validations.push(valid);
  157. if (valid) {
  158. this.S(el).removeAttr(this.invalid_attr);
  159. parent.removeClass('error');
  160. } else {
  161. this.S(el).attr(this.invalid_attr, '');
  162. parent.addClass('error');
  163. }
  164. } else {
  165. if (el_patterns[i][1].test(value) && valid_length ||
  166. !required && el.value.length < 1 || $(el).attr('disabled')) {
  167. this.S(el).removeAttr(this.invalid_attr);
  168. parent.removeClass('error');
  169. if (label.length > 0 && settings.error_labels) label.removeClass('error');
  170. validations.push(true);
  171. $(el).triggerHandler('valid');
  172. } else {
  173. this.S(el).attr(this.invalid_attr, '');
  174. parent.addClass('error');
  175. if (label.length > 0 && settings.error_labels) label.addClass('error');
  176. validations.push(false);
  177. $(el).triggerHandler('invalid');
  178. }
  179. }
  180. }
  181. return validations;
  182. },
  183. valid_checkbox : function(el, required) {
  184. var el = this.S(el),
  185. valid = (el.is(':checked') || !required);
  186. if (valid) {
  187. el.removeAttr(this.invalid_attr).parent().removeClass('error');
  188. } else {
  189. el.attr(this.invalid_attr, '').parent().addClass('error');
  190. }
  191. return valid;
  192. },
  193. valid_radio : function (el, required) {
  194. var name = el.getAttribute('name'),
  195. group = this.S(el).closest('[data-' + this.attr_name(true) + ']').find("[name="+name+"]"),
  196. count = group.length,
  197. valid = false;
  198. // Has to count up to make sure the focus gets applied to the top error
  199. for (var i=0; i < count; i++) {
  200. if (group[i].checked) valid = true;
  201. }
  202. // Has to count up to make sure the focus gets applied to the top error
  203. for (var i=0; i < count; i++) {
  204. if (valid) {
  205. this.S(group[i]).removeAttr(this.invalid_attr).parent().removeClass('error');
  206. } else {
  207. this.S(group[i]).attr(this.invalid_attr, '').parent().addClass('error');
  208. }
  209. }
  210. return valid;
  211. },
  212. valid_equal: function(el, required, parent) {
  213. var from = document.getElementById(el.getAttribute(this.add_namespace('data-equalto'))).value,
  214. to = el.value,
  215. valid = (from === to);
  216. if (valid) {
  217. this.S(el).removeAttr(this.invalid_attr);
  218. parent.removeClass('error');
  219. } else {
  220. this.S(el).attr(this.invalid_attr, '');
  221. parent.addClass('error');
  222. }
  223. return valid;
  224. },
  225. valid_oneof: function(el, required, parent, doNotValidateOthers) {
  226. var el = this.S(el),
  227. others = this.S('[' + this.add_namespace('data-oneof') + ']'),
  228. valid = others.filter(':checked').length > 0;
  229. if (valid) {
  230. el.removeAttr(this.invalid_attr).parent().removeClass('error');
  231. } else {
  232. el.attr(this.invalid_attr, '').parent().addClass('error');
  233. }
  234. if (!doNotValidateOthers) {
  235. var _this = this;
  236. others.each(function() {
  237. _this.valid_oneof.call(_this, this, null, null, true);
  238. });
  239. }
  240. return valid;
  241. }
  242. };
  243. }(jQuery, this, this.document));