!function(Foundation, $) { 'use strict'; /** * Creates a new instance of Abide. * @class * @fires Abide#init * @param {Object} element - jQuery object to add the trigger to. * @param {Object} options - Overrides to the default plugin settings. */ function Abide(element, options) { this.$element = element; this.options = $.extend({}, Abide.defaults, this.$element.data(), options); this._init(); Foundation.registerPlugin(this, 'Abide'); } /** * Default settings for plugin */ Abide.defaults = { /** * The default event to validate inputs. Checkboxes and radios validate immediately. * Remove or change this value for manual validation. * @option * @example 'fieldChange' */ validateOn: 'fieldChange', /** * Class to be applied to input labels on failed validation. * @option * @example 'is-invalid-label' */ labelErrorClass: 'is-invalid-label', /** * Class to be applied to inputs on failed validation. * @option * @example 'is-invalid-input' */ inputErrorClass: 'is-invalid-input', /** * Class selector to use to target Form Errors for show/hide. * @option * @example '.form-error' */ formErrorSelector: '.form-error', /** * Class added to Form Errors on failed validation. * @option * @example 'is-visible' */ formErrorClass: 'is-visible', /** * Set to true to validate text inputs on any value change. * @option * @example false */ liveValidate: false, patterns: { alpha : /^[a-zA-Z]+$/, alpha_numeric : /^[a-zA-Z0-9]+$/, integer : /^[-+]?\d+$/, number : /^[-+]?\d*(?:[\.\,]\d+)?$/, // amex, visa, diners 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})$/, cvv : /^([0-9]){3,4}$/, // http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address 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])?)+$/, 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})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/, // abc.de domain : /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/, 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))$/, // YYYY-MM-DD 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))$/, // HH:MM:SS time : /^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/, dateISO : /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/, // MM/DD/YYYY month_day_year : /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/, // DD/MM/YYYY day_month_year : /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/, // #FFF or #FFFFFF color : /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/ }, /** * Optional validation functions to be used. `equalTo` being the only default included function. * Functions should return only a boolean if the input is valid or not. Functions are given the following arguments: * el : The jQuery element to validate. * required : Boolean value of the required attribute be present or not. * parent : The direct parent of the input. * @option */ validators: { equalTo: function (el, required, parent) { return $('#' + el.attr('data-equalto')).val() === el.val(); } } }; /** * Initializes the Abide plugin and calls functions to get Abide functioning on load. * @private */ Abide.prototype._init = function(){ this.$inputs = this.$element.find('input, textarea, select').not('[data-abide-ignore]'); this._events(); }; /** * Initializes events for Abide. * @private */ Abide.prototype._events = function() { var _this = this; this.$element.off('.abide') .on('reset.zf.abide', function(e){ _this.resetForm(); }) .on('submit.zf.abide', function(e){ return _this.validateForm(); }); if(this.options.validateOn === 'fieldChange'){ this.$inputs.off('change.zf.abide') .on('change.zf.abide', function(e){ _this.validateInput($(this)); }); } if(this.options.liveValidate){ this.$inputs.off('input.zf.abide') .on('input.zf.abide', function(e){ _this.validateInput($(this)); }); } }, /** * Calls necessary functions to update Abide upon DOM change * @private */ Abide.prototype._reflow = function() { this._init(); }; /** * Checks whether or not a form element has the required attribute and if it's checked or not * @param {Object} element - jQuery object to check for required attribute * @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty */ Abide.prototype.requiredCheck = function($el) { if(!$el.attr('required')) return true; var isGood = true; switch ($el[0].type) { case 'checkbox': case 'radio': isGood = $el[0].checked; break; case 'select': case 'select-one': case 'select-multiple': var opt = $el.find('option:selected'); if(!opt.length || !opt.val()) isGood = false; break; default: if(!$el.val() || !$el.val().length) isGood = false; } return isGood; }; /** * Based on $el, get the first element with selector in this order: * 1. The element's direct sibling('s). * 3. The element's parent's children. * * This allows for multiple form errors per input, though if none are found, no form errors will be shown. * * @param {Object} $el - jQuery object to use as reference to find the form error selector. * @returns {Object} jQuery object with the selector. */ Abide.prototype.findFormError = function($el){ var $error = $el.siblings(this.options.formErrorSelector); if(!$error.length){ $error = $el.parent().find(this.options.formErrorSelector); } return $error; }; /** * Get the first element in this order: * 2. The