foundation-rails 6.4.1.0 → 6.4.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +2 -1
- data/Rakefile +5 -6
- data/lib/foundation/rails/version.rb +1 -1
- data/vendor/assets/js/foundation.abide.js +781 -0
- data/vendor/assets/js/foundation.accordion.js +511 -0
- data/vendor/assets/js/foundation.accordionMenu.js +527 -0
- data/vendor/assets/js/foundation.core.js +860 -0
- data/vendor/assets/js/foundation.drilldown.js +759 -0
- data/vendor/assets/js/foundation.dropdown.js +1131 -0
- data/vendor/assets/js/foundation.dropdownMenu.js +678 -0
- data/vendor/assets/js/foundation.equalizer.js +542 -0
- data/vendor/assets/js/foundation.interchange.js +399 -0
- data/vendor/assets/js/{foundation.js.es6 → foundation.js} +11 -12
- data/vendor/assets/js/foundation.magellan.js +449 -0
- data/vendor/assets/js/foundation.offcanvas.js +1052 -0
- data/vendor/assets/js/foundation.orbit.js +767 -0
- data/vendor/assets/js/foundation.responsiveAccordionTabs.js +440 -0
- data/vendor/assets/js/foundation.responsiveMenu.js +362 -0
- data/vendor/assets/js/foundation.responsiveToggle.js +336 -0
- data/vendor/assets/js/foundation.reveal.js +1066 -0
- data/vendor/assets/js/foundation.slider.js +1236 -0
- data/vendor/assets/js/foundation.smoothScroll.js +303 -0
- data/vendor/assets/js/foundation.sticky.js +1001 -0
- data/vendor/assets/js/foundation.tabs.js +678 -0
- data/vendor/assets/js/foundation.toggler.js +602 -0
- data/vendor/assets/js/foundation.tooltip.js +1195 -0
- data/vendor/assets/js/{foundation.util.box.js.es6 → foundation.util.box.js} +154 -41
- data/vendor/assets/js/foundation.util.imageLoader.js +163 -0
- data/vendor/assets/js/foundation.util.keyboard.js +298 -0
- data/vendor/assets/js/foundation.util.mediaQuery.js +353 -0
- data/vendor/assets/js/foundation.util.motion.js +231 -0
- data/vendor/assets/js/foundation.util.nest.js +181 -0
- data/vendor/assets/js/foundation.util.timer.js +170 -0
- data/vendor/assets/js/foundation.util.timerAndImageLoader.js +90 -0
- data/vendor/assets/js/foundation.util.touch.js +275 -0
- data/vendor/assets/js/foundation.util.triggers.js +399 -0
- data/vendor/assets/js/foundation.zf.responsiveAccordionTabs.js +262 -0
- metadata +37 -71
- data/vendor/assets/js/entries/foundation-plugins.js +0 -25
- data/vendor/assets/js/entries/foundation.js +0 -101
- data/vendor/assets/js/entries/plugins/foundation.abide.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.accordion.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.accordionMenu.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.core.js +0 -21
- data/vendor/assets/js/entries/plugins/foundation.drilldown.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.dropdown.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.dropdownMenu.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.equalizer.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.interchange.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.magellan.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.offcanvas.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.orbit.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.responsiveAccordionTabs.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.responsiveMenu.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.responsiveToggle.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.reveal.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.slider.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.smoothScroll.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.sticky.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.tabs.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.toggler.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.tooltip.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.util.box.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.util.imageLoader.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.util.keyboard.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.util.mediaQuery.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.util.motion.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.util.nest.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.util.timer.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.util.touch.js +0 -7
- data/vendor/assets/js/entries/plugins/foundation.util.triggers.js +0 -5
- data/vendor/assets/js/foundation.abide.js.es6 +0 -587
- data/vendor/assets/js/foundation.accordion.js.es6 +0 -329
- data/vendor/assets/js/foundation.accordionMenu.js.es6 +0 -328
- data/vendor/assets/js/foundation.core.js.es6 +0 -337
- data/vendor/assets/js/foundation.drilldown.js.es6 +0 -536
- data/vendor/assets/js/foundation.dropdown.js.es6 +0 -394
- data/vendor/assets/js/foundation.dropdownMenu.js.es6 +0 -458
- data/vendor/assets/js/foundation.equalizer.js.es6 +0 -318
- data/vendor/assets/js/foundation.interchange.js.es6 +0 -210
- data/vendor/assets/js/foundation.magellan.js.es6 +0 -257
- data/vendor/assets/js/foundation.offcanvas.js.es6 +0 -546
- data/vendor/assets/js/foundation.orbit.js.es6 +0 -531
- data/vendor/assets/js/foundation.plugin.js.es6 +0 -54
- data/vendor/assets/js/foundation.positionable.js.es6 +0 -206
- data/vendor/assets/js/foundation.responsiveAccordionTabs.js.es6 +0 -243
- data/vendor/assets/js/foundation.responsiveMenu.js.es6 +0 -155
- data/vendor/assets/js/foundation.responsiveToggle.js.es6 +0 -156
- data/vendor/assets/js/foundation.reveal.js.es6 +0 -585
- data/vendor/assets/js/foundation.slider.js.es6 +0 -712
- data/vendor/assets/js/foundation.smoothScroll.js.es6 +0 -135
- data/vendor/assets/js/foundation.sticky.js.es6 +0 -507
- data/vendor/assets/js/foundation.tabs.js.es6 +0 -498
- data/vendor/assets/js/foundation.toggler.js.es6 +0 -150
- data/vendor/assets/js/foundation.tooltip.js.es6 +0 -462
- data/vendor/assets/js/foundation.util.core.js.es6 +0 -52
- data/vendor/assets/js/foundation.util.imageLoader.js.es6 +0 -45
- data/vendor/assets/js/foundation.util.keyboard.js.es6 +0 -162
- data/vendor/assets/js/foundation.util.mediaQuery.js.es6 +0 -234
- data/vendor/assets/js/foundation.util.motion.js.es6 +0 -104
- data/vendor/assets/js/foundation.util.nest.js.es6 +0 -67
- data/vendor/assets/js/foundation.util.timer.js.es6 +0 -48
- data/vendor/assets/js/foundation.util.touch.js.es6 +0 -149
- data/vendor/assets/js/foundation.util.triggers.js.es6 +0 -268
@@ -1,21 +0,0 @@
|
|
1
|
-
import $ from 'jquery';
|
2
|
-
|
3
|
-
import { Foundation } from '../../foundation.core';
|
4
|
-
Foundation.addToJquery($);
|
5
|
-
|
6
|
-
// These are now separated out, but historically were a part of this module,
|
7
|
-
// and since this is here for backwards compatibility we include them in
|
8
|
-
// this entry.
|
9
|
-
import {rtl, GetYoDigits, transitionend} from '../../foundation.util.core';
|
10
|
-
Foundation.rtl = rtl;
|
11
|
-
Foundation.GetYoDigits = GetYoDigits;
|
12
|
-
Foundation.transitionend = transitionend;
|
13
|
-
|
14
|
-
// Every plugin depends on plugin now, we can include that on the core for the
|
15
|
-
// script inclusion path.
|
16
|
-
|
17
|
-
import { Plugin } from '../../foundation.plugin';
|
18
|
-
Foundation.Plugin = Plugin;
|
19
|
-
|
20
|
-
|
21
|
-
window.Foundation = Foundation;
|
@@ -1,587 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
import $ from 'jquery';
|
4
|
-
import { Plugin } from './foundation.plugin';
|
5
|
-
|
6
|
-
/**
|
7
|
-
* Abide module.
|
8
|
-
* @module foundation.abide
|
9
|
-
*/
|
10
|
-
|
11
|
-
class Abide extends Plugin {
|
12
|
-
/**
|
13
|
-
* Creates a new instance of Abide.
|
14
|
-
* @class
|
15
|
-
* @name Abide
|
16
|
-
* @fires Abide#init
|
17
|
-
* @param {Object} element - jQuery object to add the trigger to.
|
18
|
-
* @param {Object} options - Overrides to the default plugin settings.
|
19
|
-
*/
|
20
|
-
_setup(element, options = {}) {
|
21
|
-
this.$element = element;
|
22
|
-
this.options = $.extend({}, Abide.defaults, this.$element.data(), options);
|
23
|
-
|
24
|
-
this.className = 'Abide'; // ie9 back compat
|
25
|
-
this._init();
|
26
|
-
}
|
27
|
-
|
28
|
-
/**
|
29
|
-
* Initializes the Abide plugin and calls functions to get Abide functioning on load.
|
30
|
-
* @private
|
31
|
-
*/
|
32
|
-
_init() {
|
33
|
-
this.$inputs = this.$element.find('input, textarea, select');
|
34
|
-
|
35
|
-
this._events();
|
36
|
-
}
|
37
|
-
|
38
|
-
/**
|
39
|
-
* Initializes events for Abide.
|
40
|
-
* @private
|
41
|
-
*/
|
42
|
-
_events() {
|
43
|
-
this.$element.off('.abide')
|
44
|
-
.on('reset.zf.abide', () => {
|
45
|
-
this.resetForm();
|
46
|
-
})
|
47
|
-
.on('submit.zf.abide', () => {
|
48
|
-
return this.validateForm();
|
49
|
-
});
|
50
|
-
|
51
|
-
if (this.options.validateOn === 'fieldChange') {
|
52
|
-
this.$inputs
|
53
|
-
.off('change.zf.abide')
|
54
|
-
.on('change.zf.abide', (e) => {
|
55
|
-
this.validateInput($(e.target));
|
56
|
-
});
|
57
|
-
}
|
58
|
-
|
59
|
-
if (this.options.liveValidate) {
|
60
|
-
this.$inputs
|
61
|
-
.off('input.zf.abide')
|
62
|
-
.on('input.zf.abide', (e) => {
|
63
|
-
this.validateInput($(e.target));
|
64
|
-
});
|
65
|
-
}
|
66
|
-
|
67
|
-
if (this.options.validateOnBlur) {
|
68
|
-
this.$inputs
|
69
|
-
.off('blur.zf.abide')
|
70
|
-
.on('blur.zf.abide', (e) => {
|
71
|
-
this.validateInput($(e.target));
|
72
|
-
});
|
73
|
-
}
|
74
|
-
}
|
75
|
-
|
76
|
-
/**
|
77
|
-
* Calls necessary functions to update Abide upon DOM change
|
78
|
-
* @private
|
79
|
-
*/
|
80
|
-
_reflow() {
|
81
|
-
this._init();
|
82
|
-
}
|
83
|
-
|
84
|
-
/**
|
85
|
-
* Checks whether or not a form element has the required attribute and if it's checked or not
|
86
|
-
* @param {Object} element - jQuery object to check for required attribute
|
87
|
-
* @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
|
88
|
-
*/
|
89
|
-
requiredCheck($el) {
|
90
|
-
if (!$el.attr('required')) return true;
|
91
|
-
|
92
|
-
var isGood = true;
|
93
|
-
|
94
|
-
switch ($el[0].type) {
|
95
|
-
case 'checkbox':
|
96
|
-
isGood = $el[0].checked;
|
97
|
-
break;
|
98
|
-
|
99
|
-
case 'select':
|
100
|
-
case 'select-one':
|
101
|
-
case 'select-multiple':
|
102
|
-
var opt = $el.find('option:selected');
|
103
|
-
if (!opt.length || !opt.val()) isGood = false;
|
104
|
-
break;
|
105
|
-
|
106
|
-
default:
|
107
|
-
if(!$el.val() || !$el.val().length) isGood = false;
|
108
|
-
}
|
109
|
-
|
110
|
-
return isGood;
|
111
|
-
}
|
112
|
-
|
113
|
-
/**
|
114
|
-
* Get:
|
115
|
-
* - Based on $el, the first element(s) corresponding to `formErrorSelector` in this order:
|
116
|
-
* 1. The element's direct sibling('s).
|
117
|
-
* 2. The element's parent's children.
|
118
|
-
* - Element(s) with the attribute `[data-form-error-for]` set with the element's id.
|
119
|
-
*
|
120
|
-
* This allows for multiple form errors per input, though if none are found, no form errors will be shown.
|
121
|
-
*
|
122
|
-
* @param {Object} $el - jQuery object to use as reference to find the form error selector.
|
123
|
-
* @returns {Object} jQuery object with the selector.
|
124
|
-
*/
|
125
|
-
findFormError($el) {
|
126
|
-
var id = $el[0].id;
|
127
|
-
var $error = $el.siblings(this.options.formErrorSelector);
|
128
|
-
|
129
|
-
if (!$error.length) {
|
130
|
-
$error = $el.parent().find(this.options.formErrorSelector);
|
131
|
-
}
|
132
|
-
|
133
|
-
$error = $error.add(this.$element.find(`[data-form-error-for="${id}"]`));
|
134
|
-
|
135
|
-
return $error;
|
136
|
-
}
|
137
|
-
|
138
|
-
/**
|
139
|
-
* Get the first element in this order:
|
140
|
-
* 2. The <label> with the attribute `[for="someInputId"]`
|
141
|
-
* 3. The `.closest()` <label>
|
142
|
-
*
|
143
|
-
* @param {Object} $el - jQuery object to check for required attribute
|
144
|
-
* @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
|
145
|
-
*/
|
146
|
-
findLabel($el) {
|
147
|
-
var id = $el[0].id;
|
148
|
-
var $label = this.$element.find(`label[for="${id}"]`);
|
149
|
-
|
150
|
-
if (!$label.length) {
|
151
|
-
return $el.closest('label');
|
152
|
-
}
|
153
|
-
|
154
|
-
return $label;
|
155
|
-
}
|
156
|
-
|
157
|
-
/**
|
158
|
-
* Get the set of labels associated with a set of radio els in this order
|
159
|
-
* 2. The <label> with the attribute `[for="someInputId"]`
|
160
|
-
* 3. The `.closest()` <label>
|
161
|
-
*
|
162
|
-
* @param {Object} $el - jQuery object to check for required attribute
|
163
|
-
* @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
|
164
|
-
*/
|
165
|
-
findRadioLabels($els) {
|
166
|
-
var labels = $els.map((i, el) => {
|
167
|
-
var id = el.id;
|
168
|
-
var $label = this.$element.find(`label[for="${id}"]`);
|
169
|
-
|
170
|
-
if (!$label.length) {
|
171
|
-
$label = $(el).closest('label');
|
172
|
-
}
|
173
|
-
return $label[0];
|
174
|
-
});
|
175
|
-
|
176
|
-
return $(labels);
|
177
|
-
}
|
178
|
-
|
179
|
-
/**
|
180
|
-
* Adds the CSS error class as specified by the Abide settings to the label, input, and the form
|
181
|
-
* @param {Object} $el - jQuery object to add the class to
|
182
|
-
*/
|
183
|
-
addErrorClasses($el) {
|
184
|
-
var $label = this.findLabel($el);
|
185
|
-
var $formError = this.findFormError($el);
|
186
|
-
|
187
|
-
if ($label.length) {
|
188
|
-
$label.addClass(this.options.labelErrorClass);
|
189
|
-
}
|
190
|
-
|
191
|
-
if ($formError.length) {
|
192
|
-
$formError.addClass(this.options.formErrorClass);
|
193
|
-
}
|
194
|
-
|
195
|
-
$el.addClass(this.options.inputErrorClass).attr('data-invalid', '');
|
196
|
-
}
|
197
|
-
|
198
|
-
/**
|
199
|
-
* Remove CSS error classes etc from an entire radio button group
|
200
|
-
* @param {String} groupName - A string that specifies the name of a radio button group
|
201
|
-
*
|
202
|
-
*/
|
203
|
-
|
204
|
-
removeRadioErrorClasses(groupName) {
|
205
|
-
var $els = this.$element.find(`:radio[name="${groupName}"]`);
|
206
|
-
var $labels = this.findRadioLabels($els);
|
207
|
-
var $formErrors = this.findFormError($els);
|
208
|
-
|
209
|
-
if ($labels.length) {
|
210
|
-
$labels.removeClass(this.options.labelErrorClass);
|
211
|
-
}
|
212
|
-
|
213
|
-
if ($formErrors.length) {
|
214
|
-
$formErrors.removeClass(this.options.formErrorClass);
|
215
|
-
}
|
216
|
-
|
217
|
-
$els.removeClass(this.options.inputErrorClass).removeAttr('data-invalid');
|
218
|
-
|
219
|
-
}
|
220
|
-
|
221
|
-
/**
|
222
|
-
* Removes CSS error class as specified by the Abide settings from the label, input, and the form
|
223
|
-
* @param {Object} $el - jQuery object to remove the class from
|
224
|
-
*/
|
225
|
-
removeErrorClasses($el) {
|
226
|
-
// radios need to clear all of the els
|
227
|
-
if($el[0].type == 'radio') {
|
228
|
-
return this.removeRadioErrorClasses($el.attr('name'));
|
229
|
-
}
|
230
|
-
|
231
|
-
var $label = this.findLabel($el);
|
232
|
-
var $formError = this.findFormError($el);
|
233
|
-
|
234
|
-
if ($label.length) {
|
235
|
-
$label.removeClass(this.options.labelErrorClass);
|
236
|
-
}
|
237
|
-
|
238
|
-
if ($formError.length) {
|
239
|
-
$formError.removeClass(this.options.formErrorClass);
|
240
|
-
}
|
241
|
-
|
242
|
-
$el.removeClass(this.options.inputErrorClass).removeAttr('data-invalid');
|
243
|
-
}
|
244
|
-
|
245
|
-
/**
|
246
|
-
* Goes through a form to find inputs and proceeds to validate them in ways specific to their type.
|
247
|
-
* Ignores inputs with data-abide-ignore, type="hidden" or disabled attributes set
|
248
|
-
* @fires Abide#invalid
|
249
|
-
* @fires Abide#valid
|
250
|
-
* @param {Object} element - jQuery object to validate, should be an HTML input
|
251
|
-
* @returns {Boolean} goodToGo - If the input is valid or not.
|
252
|
-
*/
|
253
|
-
validateInput($el) {
|
254
|
-
var clearRequire = this.requiredCheck($el),
|
255
|
-
validated = false,
|
256
|
-
customValidator = true,
|
257
|
-
validator = $el.attr('data-validator'),
|
258
|
-
equalTo = true;
|
259
|
-
|
260
|
-
// don't validate ignored inputs or hidden inputs or disabled inputs
|
261
|
-
if ($el.is('[data-abide-ignore]') || $el.is('[type="hidden"]') || $el.is('[disabled]')) {
|
262
|
-
return true;
|
263
|
-
}
|
264
|
-
|
265
|
-
switch ($el[0].type) {
|
266
|
-
case 'radio':
|
267
|
-
validated = this.validateRadio($el.attr('name'));
|
268
|
-
break;
|
269
|
-
|
270
|
-
case 'checkbox':
|
271
|
-
validated = clearRequire;
|
272
|
-
break;
|
273
|
-
|
274
|
-
case 'select':
|
275
|
-
case 'select-one':
|
276
|
-
case 'select-multiple':
|
277
|
-
validated = clearRequire;
|
278
|
-
break;
|
279
|
-
|
280
|
-
default:
|
281
|
-
validated = this.validateText($el);
|
282
|
-
}
|
283
|
-
|
284
|
-
if (validator) {
|
285
|
-
customValidator = this.matchValidation($el, validator, $el.attr('required'));
|
286
|
-
}
|
287
|
-
|
288
|
-
if ($el.attr('data-equalto')) {
|
289
|
-
equalTo = this.options.validators.equalTo($el);
|
290
|
-
}
|
291
|
-
|
292
|
-
|
293
|
-
var goodToGo = [clearRequire, validated, customValidator, equalTo].indexOf(false) === -1;
|
294
|
-
var message = (goodToGo ? 'valid' : 'invalid') + '.zf.abide';
|
295
|
-
|
296
|
-
if (goodToGo) {
|
297
|
-
// Re-validate inputs that depend on this one with equalto
|
298
|
-
const dependentElements = this.$element.find(`[data-equalto="${$el.attr('id')}"]`);
|
299
|
-
if (dependentElements.length) {
|
300
|
-
let _this = this;
|
301
|
-
dependentElements.each(function() {
|
302
|
-
if ($(this).val()) {
|
303
|
-
_this.validateInput($(this));
|
304
|
-
}
|
305
|
-
});
|
306
|
-
}
|
307
|
-
}
|
308
|
-
|
309
|
-
this[goodToGo ? 'removeErrorClasses' : 'addErrorClasses']($el);
|
310
|
-
|
311
|
-
/**
|
312
|
-
* Fires when the input is done checking for validation. Event trigger is either `valid.zf.abide` or `invalid.zf.abide`
|
313
|
-
* Trigger includes the DOM element of the input.
|
314
|
-
* @event Abide#valid
|
315
|
-
* @event Abide#invalid
|
316
|
-
*/
|
317
|
-
$el.trigger(message, [$el]);
|
318
|
-
|
319
|
-
return goodToGo;
|
320
|
-
}
|
321
|
-
|
322
|
-
/**
|
323
|
-
* Goes through a form and if there are any invalid inputs, it will display the form error element
|
324
|
-
* @returns {Boolean} noError - true if no errors were detected...
|
325
|
-
* @fires Abide#formvalid
|
326
|
-
* @fires Abide#forminvalid
|
327
|
-
*/
|
328
|
-
validateForm() {
|
329
|
-
var acc = [];
|
330
|
-
var _this = this;
|
331
|
-
|
332
|
-
this.$inputs.each(function() {
|
333
|
-
acc.push(_this.validateInput($(this)));
|
334
|
-
});
|
335
|
-
|
336
|
-
var noError = acc.indexOf(false) === -1;
|
337
|
-
|
338
|
-
this.$element.find('[data-abide-error]').css('display', (noError ? 'none' : 'block'));
|
339
|
-
|
340
|
-
/**
|
341
|
-
* Fires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`.
|
342
|
-
* Trigger includes the element of the form.
|
343
|
-
* @event Abide#formvalid
|
344
|
-
* @event Abide#forminvalid
|
345
|
-
*/
|
346
|
-
this.$element.trigger((noError ? 'formvalid' : 'forminvalid') + '.zf.abide', [this.$element]);
|
347
|
-
|
348
|
-
return noError;
|
349
|
-
}
|
350
|
-
|
351
|
-
/**
|
352
|
-
* Determines whether or a not a text input is valid based on the pattern specified in the attribute. If no matching pattern is found, returns true.
|
353
|
-
* @param {Object} $el - jQuery object to validate, should be a text input HTML element
|
354
|
-
* @param {String} pattern - string value of one of the RegEx patterns in Abide.options.patterns
|
355
|
-
* @returns {Boolean} Boolean value depends on whether or not the input value matches the pattern specified
|
356
|
-
*/
|
357
|
-
validateText($el, pattern) {
|
358
|
-
// A pattern can be passed to this function, or it will be infered from the input's "pattern" attribute, or it's "type" attribute
|
359
|
-
pattern = (pattern || $el.attr('pattern') || $el.attr('type'));
|
360
|
-
var inputText = $el.val();
|
361
|
-
var valid = false;
|
362
|
-
|
363
|
-
if (inputText.length) {
|
364
|
-
// If the pattern attribute on the element is in Abide's list of patterns, then test that regexp
|
365
|
-
if (this.options.patterns.hasOwnProperty(pattern)) {
|
366
|
-
valid = this.options.patterns[pattern].test(inputText);
|
367
|
-
}
|
368
|
-
// If the pattern name isn't also the type attribute of the field, then test it as a regexp
|
369
|
-
else if (pattern !== $el.attr('type')) {
|
370
|
-
valid = new RegExp(pattern).test(inputText);
|
371
|
-
}
|
372
|
-
else {
|
373
|
-
valid = true;
|
374
|
-
}
|
375
|
-
}
|
376
|
-
// An empty field is valid if it's not required
|
377
|
-
else if (!$el.prop('required')) {
|
378
|
-
valid = true;
|
379
|
-
}
|
380
|
-
|
381
|
-
return valid;
|
382
|
-
}
|
383
|
-
|
384
|
-
/**
|
385
|
-
* Determines whether or a not a radio input is valid based on whether or not it is required and selected. Although the function targets a single `<input>`, it validates by checking the `required` and `checked` properties of all radio buttons in its group.
|
386
|
-
* @param {String} groupName - A string that specifies the name of a radio button group
|
387
|
-
* @returns {Boolean} Boolean value depends on whether or not at least one radio input has been selected (if it's required)
|
388
|
-
*/
|
389
|
-
validateRadio(groupName) {
|
390
|
-
// If at least one radio in the group has the `required` attribute, the group is considered required
|
391
|
-
// Per W3C spec, all radio buttons in a group should have `required`, but we're being nice
|
392
|
-
var $group = this.$element.find(`:radio[name="${groupName}"]`);
|
393
|
-
var valid = false, required = false;
|
394
|
-
|
395
|
-
// For the group to be required, at least one radio needs to be required
|
396
|
-
$group.each((i, e) => {
|
397
|
-
if ($(e).attr('required')) {
|
398
|
-
required = true;
|
399
|
-
}
|
400
|
-
});
|
401
|
-
if(!required) valid=true;
|
402
|
-
|
403
|
-
if (!valid) {
|
404
|
-
// For the group to be valid, at least one radio needs to be checked
|
405
|
-
$group.each((i, e) => {
|
406
|
-
if ($(e).prop('checked')) {
|
407
|
-
valid = true;
|
408
|
-
}
|
409
|
-
});
|
410
|
-
};
|
411
|
-
|
412
|
-
return valid;
|
413
|
-
}
|
414
|
-
|
415
|
-
/**
|
416
|
-
* Determines if a selected input passes a custom validation function. Multiple validations can be used, if passed to the element with `data-validator="foo bar baz"` in a space separated listed.
|
417
|
-
* @param {Object} $el - jQuery input element.
|
418
|
-
* @param {String} validators - a string of function names matching functions in the Abide.options.validators object.
|
419
|
-
* @param {Boolean} required - self explanatory?
|
420
|
-
* @returns {Boolean} - true if validations passed.
|
421
|
-
*/
|
422
|
-
matchValidation($el, validators, required) {
|
423
|
-
required = required ? true : false;
|
424
|
-
|
425
|
-
var clear = validators.split(' ').map((v) => {
|
426
|
-
return this.options.validators[v]($el, required, $el.parent());
|
427
|
-
});
|
428
|
-
return clear.indexOf(false) === -1;
|
429
|
-
}
|
430
|
-
|
431
|
-
/**
|
432
|
-
* Resets form inputs and styles
|
433
|
-
* @fires Abide#formreset
|
434
|
-
*/
|
435
|
-
resetForm() {
|
436
|
-
var $form = this.$element,
|
437
|
-
opts = this.options;
|
438
|
-
|
439
|
-
$(`.${opts.labelErrorClass}`, $form).not('small').removeClass(opts.labelErrorClass);
|
440
|
-
$(`.${opts.inputErrorClass}`, $form).not('small').removeClass(opts.inputErrorClass);
|
441
|
-
$(`${opts.formErrorSelector}.${opts.formErrorClass}`).removeClass(opts.formErrorClass);
|
442
|
-
$form.find('[data-abide-error]').css('display', 'none');
|
443
|
-
$(':input', $form).not(':button, :submit, :reset, :hidden, :radio, :checkbox, [data-abide-ignore]').val('').removeAttr('data-invalid');
|
444
|
-
$(':input:radio', $form).not('[data-abide-ignore]').prop('checked',false).removeAttr('data-invalid');
|
445
|
-
$(':input:checkbox', $form).not('[data-abide-ignore]').prop('checked',false).removeAttr('data-invalid');
|
446
|
-
/**
|
447
|
-
* Fires when the form has been reset.
|
448
|
-
* @event Abide#formreset
|
449
|
-
*/
|
450
|
-
$form.trigger('formreset.zf.abide', [$form]);
|
451
|
-
}
|
452
|
-
|
453
|
-
/**
|
454
|
-
* Destroys an instance of Abide.
|
455
|
-
* Removes error styles and classes from elements, without resetting their values.
|
456
|
-
*/
|
457
|
-
_destroy() {
|
458
|
-
var _this = this;
|
459
|
-
this.$element
|
460
|
-
.off('.abide')
|
461
|
-
.find('[data-abide-error]')
|
462
|
-
.css('display', 'none');
|
463
|
-
|
464
|
-
this.$inputs
|
465
|
-
.off('.abide')
|
466
|
-
.each(function() {
|
467
|
-
_this.removeErrorClasses($(this));
|
468
|
-
});
|
469
|
-
}
|
470
|
-
}
|
471
|
-
|
472
|
-
/**
|
473
|
-
* Default settings for plugin
|
474
|
-
*/
|
475
|
-
Abide.defaults = {
|
476
|
-
/**
|
477
|
-
* The default event to validate inputs. Checkboxes and radios validate immediately.
|
478
|
-
* Remove or change this value for manual validation.
|
479
|
-
* @option
|
480
|
-
* @type {?string}
|
481
|
-
* @default 'fieldChange'
|
482
|
-
*/
|
483
|
-
validateOn: 'fieldChange',
|
484
|
-
|
485
|
-
/**
|
486
|
-
* Class to be applied to input labels on failed validation.
|
487
|
-
* @option
|
488
|
-
* @type {string}
|
489
|
-
* @default 'is-invalid-label'
|
490
|
-
*/
|
491
|
-
labelErrorClass: 'is-invalid-label',
|
492
|
-
|
493
|
-
/**
|
494
|
-
* Class to be applied to inputs on failed validation.
|
495
|
-
* @option
|
496
|
-
* @type {string}
|
497
|
-
* @default 'is-invalid-input'
|
498
|
-
*/
|
499
|
-
inputErrorClass: 'is-invalid-input',
|
500
|
-
|
501
|
-
/**
|
502
|
-
* Class selector to use to target Form Errors for show/hide.
|
503
|
-
* @option
|
504
|
-
* @type {string}
|
505
|
-
* @default '.form-error'
|
506
|
-
*/
|
507
|
-
formErrorSelector: '.form-error',
|
508
|
-
|
509
|
-
/**
|
510
|
-
* Class added to Form Errors on failed validation.
|
511
|
-
* @option
|
512
|
-
* @type {string}
|
513
|
-
* @default 'is-visible'
|
514
|
-
*/
|
515
|
-
formErrorClass: 'is-visible',
|
516
|
-
|
517
|
-
/**
|
518
|
-
* Set to true to validate text inputs on any value change.
|
519
|
-
* @option
|
520
|
-
* @type {boolean}
|
521
|
-
* @default false
|
522
|
-
*/
|
523
|
-
liveValidate: false,
|
524
|
-
|
525
|
-
/**
|
526
|
-
* Set to true to validate inputs on blur.
|
527
|
-
* @option
|
528
|
-
* @type {boolean}
|
529
|
-
* @default false
|
530
|
-
*/
|
531
|
-
validateOnBlur: false,
|
532
|
-
|
533
|
-
patterns: {
|
534
|
-
alpha : /^[a-zA-Z]+$/,
|
535
|
-
alpha_numeric : /^[a-zA-Z0-9]+$/,
|
536
|
-
integer : /^[-+]?\d+$/,
|
537
|
-
number : /^[-+]?\d*(?:[\.\,]\d+)?$/,
|
538
|
-
|
539
|
-
// amex, visa, diners
|
540
|
-
card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|(?:222[1-9]|2[3-6][0-9]{2}|27[0-1][0-9]|2720)[0-9]{12}|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})$/,
|
541
|
-
cvv : /^([0-9]){3,4}$/,
|
542
|
-
|
543
|
-
// http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
|
544
|
-
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])?)+$/,
|
545
|
-
|
546
|
-
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})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,
|
547
|
-
// abc.de
|
548
|
-
domain : /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,
|
549
|
-
|
550
|
-
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))$/,
|
551
|
-
// YYYY-MM-DD
|
552
|
-
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))$/,
|
553
|
-
// HH:MM:SS
|
554
|
-
time : /^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,
|
555
|
-
dateISO : /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,
|
556
|
-
// MM/DD/YYYY
|
557
|
-
month_day_year : /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,
|
558
|
-
// DD/MM/YYYY
|
559
|
-
day_month_year : /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,
|
560
|
-
|
561
|
-
// #FFF or #FFFFFF
|
562
|
-
color : /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,
|
563
|
-
|
564
|
-
// Domain || URL
|
565
|
-
website: {
|
566
|
-
test: (text) => {
|
567
|
-
return Abide.defaults.patterns['domain'].test(text) || Abide.defaults.patterns['url'].test(text);
|
568
|
-
}
|
569
|
-
}
|
570
|
-
},
|
571
|
-
|
572
|
-
/**
|
573
|
-
* Optional validation functions to be used. `equalTo` being the only default included function.
|
574
|
-
* Functions should return only a boolean if the input is valid or not. Functions are given the following arguments:
|
575
|
-
* el : The jQuery element to validate.
|
576
|
-
* required : Boolean value of the required attribute be present or not.
|
577
|
-
* parent : The direct parent of the input.
|
578
|
-
* @option
|
579
|
-
*/
|
580
|
-
validators: {
|
581
|
-
equalTo: function (el, required, parent) {
|
582
|
-
return $(`#${el.attr('data-equalto')}`).val() === el.val();
|
583
|
-
}
|
584
|
-
}
|
585
|
-
}
|
586
|
-
|
587
|
-
export {Abide};
|