/files/jquery.h5validate/0.8.4/jquery.h5validate.js
JavaScript | 553 lines | 353 code | 78 blank | 122 comment | 54 complexity | 4c772dd400c89a1562bb5eee9d14b4ad MD5 | raw file
- /**
- * h5Validate
- * @version v0.8.4
- * Using semantic versioning: http://semver.org/
- * @author Eric Hamilton http://ericleads.com/
- * @copyright 2010 - 2012 Eric Hamilton
- * Dual licensed under the MIT and GPL licenses:
- * http://www.opensource.org/licenses/mit-license.php
- * http://www.gnu.org/licenses/gpl.html
- *
- * Developed under the sponsorship of RootMusic, Zumba Fitness, LLC, and Rese Property Management
- */
- /*global jQuery, window, console */
- (function ($) {
- 'use strict';
- var console = window.console || function () {},
- h5 = { // Public API
- defaults : {
- debug: false,
- RODom: false,
- // HTML5-compatible validation pattern library that can be extended and/or overriden.
- patternLibrary : { //** TODO: Test the new regex patterns. Should I apply these to the new input types?
- // **TODO: password
- phone: /([\+][0-9]{1,3}([ \.\-])?)?([\(]{1}[0-9]{3}[\)])?([0-9A-Z \.\-]{1,32})((x|ext|extension)?[0-9]{1,4}?)/,
- // Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/email_address_validation/
- email: /((([a-zA-Z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-zA-Z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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])))\.?/,
- // Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/iri/
- url: /(https?|ftp):\/\/(((([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})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?/,
- // Number, including positive, negative, and floating decimal. Credit: bassistance
- number: /-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?/,
- // Date in ISO format. Credit: bassistance
- dateISO: /\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}/,
- alpha: /[a-zA-Z]+/,
- alphaNumeric: /\w+/,
- integer: /-?\d+/
- },
- // The prefix to use for dynamically-created class names.
- classPrefix: 'h5-',
- errorClass: 'ui-state-error', // No prefix for these.
- validClass: 'ui-state-valid', // "
- activeClass: 'active', // Prefix will get prepended.
- requiredClass: 'required',
- requiredAttribute: 'required',
- patternAttribute: 'pattern',
- // Attribute which stores the ID of the error container element (without the hash).
- errorAttribute: 'data-h5-errorid',
- // Events API
- customEvents: {
- 'validate': true
- },
- // Setup KB event delegation.
- kbSelectors: ':input:not(:button):not(:disabled):not(.novalidate)',
- focusout: true,
- focusin: false,
- change: true,
- keyup: false,
- activeKeyup: true,
- // Setup mouse event delegation.
- mSelectors: '[type="range"]:not(:disabled):not(.novalidate), :radio:not(:disabled):not(.novalidate), :checkbox:not(:disabled):not(.novalidate), select:not(:disabled):not(.novalidate), option:not(:disabled):not(.novalidate)',
- click: true,
- // What do we name the required .data variable?
- requiredVar: 'h5-required',
- // What do we name the pattern .data variable?
- patternVar: 'h5-pattern',
- stripMarkup: true,
- // Run submit related checks and prevent form submission if any fields are invalid?
- submit: true,
- // Move focus to the first invalid field on submit?
- focusFirstInvalidElementOnSubmit: true,
- // When submitting, validate elements that haven't been validated yet?
- validateOnSubmit: true,
- // Callback stubs
- invalidCallback: function () {},
- validCallback: function () {},
- // Elements to validate with allValid (only validating visible elements)
- allValidSelectors: ':input:visible:not(:button):not(:disabled):not(.novalidate)',
- // Mark field invalid.
- // ** TODO: Highlight labels
- // ** TODO: Implement setCustomValidity as per the spec:
- // http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-setcustomvalidity
- markInvalid: function markInvalid(options) {
- var $element = $(options.element),
- $errorID = $(options.errorID);
- $element.addClass(options.errorClass).removeClass(options.validClass);
- // User needs help. Enable active validation.
- $element.addClass(options.settings.activeClass);
- if ($errorID.length) { // These ifs are technically not needed, but improve server-side performance
- if ($element.attr('title')) {
- $errorID.text($element.attr('title'));
- }
- $errorID.show();
- }
- $element.data('valid', false);
- options.settings.invalidCallback.call(options.element, options.validity);
- return $element;
- },
- // Mark field valid.
- markValid: function markValid(options) {
- var $element = $(options.element),
- $errorID = $(options.errorID);
- $element.addClass(options.validClass).removeClass(options.errorClass);
- if ($errorID.length) {
- $errorID.hide();
- }
- $element.data('valid', true);
- options.settings.validCallback.call(options.element, options.validity);
- return $element;
- },
- // Unmark field
- unmark: function unmark(options) {
- var $element = $(options.element);
- $element.removeClass(options.errorClass).removeClass(options.validClass);
- $element.form.find("#" + options.element.id).removeClass(options.errorClass).removeClass(options.validClass);
- return $element;
- }
- }
- },
- // Aliases
- defaults = h5.defaults,
- patternLibrary = defaults.patternLibrary,
- createValidity = function createValidity(validity) {
- return $.extend({
- customError: validity.customError || false,
- patternMismatch: validity.patternMismatch || false,
- rangeOverflow: validity.rangeOverflow || false,
- rangeUnderflow: validity.rangeUnderflow || false,
- stepMismatch: validity.stepMismatch || false,
- tooLong: validity.tooLong || false,
- typeMismatch: validity.typeMismatch || false,
- valid: validity.valid || true,
- valueMissing: validity.valueMissing || false
- }, validity);
- },
- methods = {
- /**
- * Check the validity of the current field
- * @param {object} settings instance settings
- * @param {object} options
- * .revalidate - trigger validation function first?
- * @return {Boolean}
- */
- isValid: function (settings, options) {
- var $this = $(this);
- options = (settings && options) || {};
- // Revalidate defaults to true
- if (options.revalidate !== false) {
- $this.trigger('validate');
- }
- return $this.data('valid'); // get the validation result
- },
- allValid: function (config, options) {
- var valid = true,
- formValidity = [],
- $this = $(this),
- $allFields,
- $filteredFields,
- radioNames = [],
- getValidity = function getValidity(e, data) {
- data.e = e;
- formValidity.push(data);
- },
- settings = $.extend({}, config, options); // allow options to override settings
- options = options || {};
- $this.trigger('formValidate', {settings: $.extend(true, {}, settings)});
- // Make sure we're not triggering handlers more than we need to.
- $this.undelegate(settings.allValidSelectors,
- '.allValid', getValidity);
- $this.delegate(settings.allValidSelectors,
- 'validated.allValid', getValidity);
- $allFields = $this.find(settings.allValidSelectors);
- // Filter radio buttons with the same name and keep only one,
- // since they will be checked as a group by isValid()
- $filteredFields = $allFields.filter(function(index) {
- var name;
- if(this.tagName === "INPUT"
- && this.type === "radio") {
- name = this.name;
- if(radioNames[name] === true) {
- return false;
- }
- radioNames[name] = true;
- }
- return true;
- });
- $filteredFields.each(function () {
- var $this = $(this);
- valid = $this.h5Validate('isValid', options) && valid;
- });
- $this.trigger('formValidated', {valid: valid, elements: formValidity});
- return valid;
- },
- validate: function (settings) {
- // Get the HTML5 pattern attribute if it exists.
- // ** TODO: If a pattern class exists, grab the pattern from the patternLibrary, but the pattern attrib should override that value.
- var $this = $(this),
- pattern = $this.filter('[pattern]')[0] ? $this.attr('pattern') : false,
- // The pattern attribute must match the whole value, not just a subset:
- // "...as if it implied a ^(?: at the start of the pattern and a )$ at the end."
- re = new RegExp('^(?:' + pattern + ')$'),
- $radiosWithSameName = null,
- value = ($this.is('[type=checkbox]')) ?
- $this.is(':checked') : ($this.is('[type=radio]') ?
- // Cache all radio buttons (in the same form) with the same name as this one
- ($radiosWithSameName = $this.parents('form')
- // **TODO: escape the radio buttons' name before using it in the jQuery selector
- .find('input[name="' + $this.attr('name') + '"]'))
- .filter(':checked')
- .length > 0 : $this.val()),
- errorClass = settings.errorClass,
- validClass = settings.validClass,
- errorIDbare = $this.attr(settings.errorAttribute) || false, // Get the ID of the error element.
- errorID = errorIDbare ? '#' + errorIDbare.replace(/(:|\.|\[|\])/g,'\\$1') : false, // Add the hash for convenience. This is done in two steps to avoid two attribute lookups.
- required = false,
- validity = createValidity({element: this, valid: true}),
- $checkRequired = $('<input required>'),
- maxlength;
- /* If the required attribute exists, set it required to true, unless it's set 'false'.
- * This is a minor deviation from the spec, but it seems some browsers have falsey
- * required values if the attribute is empty (should be true). The more conformant
- * version of this failed sanity checking in the browser environment.
- * This plugin is meant to be practical, not ideologically married to the spec.
- */
- // Feature fork
- if ($checkRequired.filter('[required]') && $checkRequired.filter('[required]').length) {
- required = ($this.filter('[required]').length && $this.attr('required') !== 'false');
- } else {
- required = ($this.attr('required') !== undefined);
- }
- if (settings.debug && window.console) {
- console.log('Validate called on "' + value + '" with regex "' + re + '". Required: ' + required); // **DEBUG
- console.log('Regex test: ' + re.test(value) + ', Pattern: ' + pattern); // **DEBUG
- }
- maxlength = parseInt($this.attr('maxlength'), 10);
- if (!isNaN(maxlength) && value.length > maxlength) {
- validity.valid = false;
- validity.tooLong = true;
- }
- if (required && !value) {
- validity.valid = false;
- validity.valueMissing = true;
- } else if (pattern && !re.test(value) && value) {
- validity.valid = false;
- validity.patternMismatch = true;
- } else {
- if (!settings.RODom) {
- settings.markValid({
- element: this,
- validity: validity,
- errorClass: errorClass,
- validClass: validClass,
- errorID: errorID,
- settings: settings
- });
- }
- }
- if (!validity.valid) {
- if (!settings.RODom) {
- settings.markInvalid({
- element: this,
- validity: validity,
- errorClass: errorClass,
- validClass: validClass,
- errorID: errorID,
- settings: settings
- });
- }
- }
- $this.trigger('validated', validity);
- // If it's a radio button, also validate the other radio buttons with the same name
- // (while making sure the call is not recursive)
- if($radiosWithSameName !== null
- && settings.alreadyCheckingRelatedRadioButtons !== true) {
- settings.alreadyCheckingRelatedRadioButtons = true;
- $radiosWithSameName
- .not($this)
- .trigger('validate');
- settings.alreadyCheckingRelatedRadioButtons = false;
- }
- },
- /**
- * Take the event preferences and delegate the events to selected
- * objects.
- *
- * @param {object} eventFlags The object containing event flags.
- *
- * @returns {element} The passed element (for method chaining).
- */
- delegateEvents: function (selectors, eventFlags, element, settings) {
- var events = {},
- key = 0,
- validate = function () {
- settings.validate.call(this, settings);
- };
- $.each(eventFlags, function (key, value) {
- if (value) {
- events[key] = key;
- }
- });
- // key = 0;
- for (key in events) {
- if (events.hasOwnProperty(key)) {
- $(element).delegate(selectors, events[key] + '.h5Validate', validate);
- }
- }
- return element;
- },
- /**
- * Prepare for event delegation.
- *
- * @param {object} settings The full plugin state, including
- * options.
- *
- * @returns {object} jQuery object for chaining.
- */
- bindDelegation: function (settings) {
- var $this = $(this),
- $forms;
- // Attach patterns from the library to elements.
- // **TODO: pattern / validation method matching should
- // take place inside the validate action.
- $.each(patternLibrary, function (key, value) {
- var pattern = value.toString();
- pattern = pattern.substring(1, pattern.length - 1);
- $('.' + settings.classPrefix + key).attr('pattern', pattern);
- });
- $forms = $this.filter('form')
- .add($this.find('form'))
- .add($this.parents('form'));
- $forms
- .attr('novalidate', 'novalidate')
- .submit(checkValidityOnSubmitHandler);
-
- $forms.find("input[formnovalidate][type='submit']").click(function(){
- $(this).closest("form").unbind('submit', checkValidityOnSubmitHandler);
- });
- return this.each(function () {
- var kbEvents = {
- focusout: settings.focusout,
- focusin: settings.focusin,
- change: settings.change,
- keyup: settings.keyup
- },
- mEvents = {
- click: settings.click
- },
- activeEvents = {
- keyup: settings.activeKeyup
- };
- settings.delegateEvents(':input', settings.customEvents, this, settings);
- settings.delegateEvents(settings.kbSelectors, kbEvents, this, settings);
- settings.delegateEvents(settings.mSelectors, mEvents, this, settings);
- settings.delegateEvents(settings.activeClassSelector, activeEvents, this, settings);
- settings.delegateEvents('textarea[maxlength]', {keyup: true}, this, settings);
- });
- }
- },
- /**
- * Event handler for the form submit event.
- * When settings.submit is enabled:
- * - prevents submission if any invalid fields are found.
- * - Optionally validates all fields.
- * - Optionally moves focus to the first invalid field.
- *
- * @param {object} evt The jQuery Event object as from the submit event.
- *
- * @returns {object} undefined if no validation was done, true if validation passed, false if validation didn't.
- */
- checkValidityOnSubmitHandler = function(evt) {
- var $this,
- settings = getInstance.call(this),
- allValid;
- if(settings.submit !== true) {
- return;
- }
- $this = $(this);
- allValid = $this.h5Validate('allValid', { revalidate: settings.validateOnSubmit === true });
- if(allValid !== true) {
- evt.preventDefault();
- if(settings.focusFirstInvalidElementOnSubmit === true){
- var $invalid = $(settings.allValidSelectors, $this)
- .filter(function(index){
- return $(this).h5Validate('isValid', { revalidate: false }) !== true;
- });
- $invalid.first().focus();
- }
- }
- return allValid;
- },
- instances = [],
- buildSettings = function buildSettings(options) {
- // Combine defaults and options to get current settings.
- var settings = $.extend({}, defaults, options, methods),
- activeClass = settings.classPrefix + settings.activeClass;
- return $.extend(settings, {
- activeClass: activeClass,
- activeClassSelector: '.' + activeClass,
- requiredClass: settings.classPrefix + settings.requiredClass,
- el: this
- });
- },
- getInstance = function getInstance() {
- var $parent = $(this).closest('[data-h5-instanceId]');
- return instances[$parent.attr('data-h5-instanceId')];
- },
- setInstance = function setInstance(settings) {
- var instanceId = instances.push(settings) - 1;
- if (settings.RODom !== true) {
- $(this).attr('data-h5-instanceId', instanceId);
- }
- $(this).trigger('instance', { 'data-h5-instanceId': instanceId });
- };
- $.h5Validate = {
- /**
- * Take a map of pattern names and HTML5-compatible regular
- * expressions, and add them to the patternLibrary. Patterns in
- * the library are automatically assigned to HTML element pattern
- * attributes for validation.
- *
- * @param {Object} patterns A map of pattern names and HTML5 compatible
- * regular expressions.
- *
- * @returns {Object} patternLibrary The modified pattern library
- */
- addPatterns: function (patterns) {
- var patternLibrary = defaults.patternLibrary,
- key;
- for (key in patterns) {
- if (patterns.hasOwnProperty(key)) {
- patternLibrary[key] = patterns[key];
- }
- }
- return patternLibrary;
- },
- /**
- * Take a valid jQuery selector, and a list of valid values to
- * validate against.
- * If the user input isn't in the list, validation fails.
- *
- * @param {String} selector Any valid jQuery selector.
- *
- * @param {Array} values A list of valid values to validate selected
- * fields against.
- */
- validValues: function (selector, values) {
- var i = 0,
- ln = values.length,
- pattern = '',
- re;
- // Build regex pattern
- for (i = 0; i < ln; i += 1) {
- pattern = pattern ? pattern + '|' + values[i] : values[i];
- }
- re = new RegExp('^(?:' + pattern + ')$');
- $(selector).data('regex', re);
- }
- };
- $.fn.h5Validate = function h5Validate(options) {
- var action,
- args,
- settings;
- if (typeof options === 'string' && typeof methods[options] === 'function') {
- // Whoah, hold on there! First we need to get the instance:
- settings = getInstance.call(this);
- args = [].slice.call(arguments, 0);
- action = options;
- args.shift();
- args = $.merge([settings], args);
- // Use settings here so we can plug methods into the instance dynamically?
- return settings[action].apply(this, args);
- }
- settings = buildSettings.call(this, options);
- setInstance.call(this, settings);
- // Returning the jQuery object allows for method chaining.
- return methods.bindDelegation.call(this, settings);
- };
- }(jQuery));