/*! * FormValidation (http://formvalidation.io) * The best jQuery plugin to validate form fields. Support Bootstrap, Foundation, Pure, SemanticUI, UIKit and custom frameworks * * @version v0.6.2-dev, built on 2015-02-24 10:46:41 PM * @author https://twitter.com/nghuuphuoc * @copyright (c) 2013 - 2015 Nguyen Huu Phuoc * @license http://formvalidation.io/license/ */ /** * This class supports validating Bootstrap form (http://getbootstrap.com/) */ (function($) { FormValidation.Framework.Bootstrap = function(element, options, namespace) { options = $.extend(true, { button: { selector: '[type="submit"]', // The class of disabled button // http://getbootstrap.com/css/#buttons-disabled disabled: 'disabled' }, err: { // http://getbootstrap.com/css/#forms-help-text clazz: 'help-block', parent: '^(.*)col-(xs|sm|md|lg)-(offset-){0,1}[0-9]+(.*)$' }, // This feature requires Bootstrap v3.1.0 or later (http://getbootstrap.com/css/#forms-control-validation). // Since Bootstrap doesn't provide any methods to know its version, this option cannot be on/off automatically. // In other word, to use this feature you have to upgrade your Bootstrap to v3.1.0 or later. // // Examples: // - Use Glyphicons icons: // icon: { // valid: 'glyphicon glyphicon-ok', // invalid: 'glyphicon glyphicon-remove', // validating: 'glyphicon glyphicon-refresh', // feedback: 'form-control-feedback' // } // - Use FontAwesome icons: // icon: { // valid: 'fa fa-check', // invalid: 'fa fa-times', // validating: 'fa fa-refresh', // feedback: 'form-control-feedback' // } icon: { valid: null, invalid: null, validating: null, feedback: 'form-control-feedback' }, row: { // By default, each field is placed inside the
// http://getbootstrap.com/css/#forms selector: '.form-group', valid: 'has-success', invalid: 'has-error', feedback: 'has-feedback' } }, options); FormValidation.Base.apply(this, [element, options, namespace]); }; FormValidation.Framework.Bootstrap.prototype = $.extend({}, FormValidation.Base.prototype, { /** * Specific framework might need to adjust the icon position * * @param {jQuery} $field The field element * @param {jQuery} $icon The icon element */ _fixIcon: function($field, $icon) { var ns = this._namespace, type = $field.attr('type'), field = $field.attr('data-' + ns + '-field'), row = this.options.fields[field].row || this.options.row.selector, $parent = $field.closest(row); // Place it after the container of checkbox/radio // so when clicking the icon, it doesn't effect to the checkbox/radio element if ('checkbox' === type || 'radio' === type) { var $fieldParent = $field.parent(); if ($fieldParent.hasClass(type)) { $icon.insertAfter($fieldParent); } else if ($fieldParent.parent().hasClass(type)) { $icon.insertAfter($fieldParent.parent()); } } // The feedback icon does not render correctly if there is no label // https://github.com/twbs/bootstrap/issues/12873 if ($parent.find('label').length === 0) { $icon.addClass('fv-icon-no-label'); } // Fix feedback icons in input-group if ($parent.find('.input-group').length !== 0) { $icon.addClass('fv-bootstrap-icon-input-group') .insertAfter($parent.find('.input-group').eq(0)); } }, /** * Create a tooltip or popover * It will be shown when focusing on the field * * @param {jQuery} $field The field element * @param {String} message The message * @param {String} type Can be 'tooltip' or 'popover' */ _createTooltip: function($field, message, type) { var ns = this._namespace, $icon = $field.data(ns + '.icon'); if ($icon) { switch (type) { case 'popover': $icon .css({ 'cursor': 'pointer', 'pointer-events': 'auto' }) .popover('destroy') .popover({ container: 'body', content: message, html: true, placement: 'auto top', trigger: 'hover click' }); break; case 'tooltip': /* falls through */ default: $icon .css({ 'cursor': 'pointer', 'pointer-events': 'auto' }) .tooltip('destroy') .tooltip({ container: 'body', html: true, placement: 'auto top', title: message }); break; } } }, /** * Destroy the tooltip or popover * * @param {jQuery} $field The field element * @param {String} type Can be 'tooltip' or 'popover' */ _destroyTooltip: function($field, type) { var ns = this._namespace, $icon = $field.data(ns + '.icon'); if ($icon) { switch (type) { case 'popover': $icon .css({ 'cursor': '', 'pointer-events': 'none' }) .popover('destroy'); break; case 'tooltip': /* falls through */ default: $icon .css({ 'cursor': '', 'pointer-events': 'none' }) .tooltip('destroy'); break; } } }, /** * Hide a tooltip or popover * * @param {jQuery} $field The field element * @param {String} type Can be 'tooltip' or 'popover' */ _hideTooltip: function($field, type) { var ns = this._namespace, $icon = $field.data(ns + '.icon'); if ($icon) { switch (type) { case 'popover': $icon.popover('hide'); break; case 'tooltip': /* falls through */ default: $icon.tooltip('hide'); break; } } }, /** * Show a tooltip or popover * * @param {jQuery} $field The field element * @param {String} type Can be 'tooltip' or 'popover' */ _showTooltip: function($field, type) { var ns = this._namespace, $icon = $field.data(ns + '.icon'); if ($icon) { switch (type) { case 'popover': $icon.popover('show'); break; case 'tooltip': /* falls through */ default: $icon.tooltip('show'); break; } } } }); /** * Plugin definition * Support backward * @deprecated It will be removed soon. Instead of using $(form).bootstrapValidator(), use * $(form).formValidation({ * framework: 'bootstrap' // It's equivalent to use data-fv-framework="bootstrap" for
* }); */ $.fn.bootstrapValidator = function(option) { var params = arguments; return this.each(function() { var $this = $(this), data = $this.data('formValidation') || $this.data('bootstrapValidator'), options = 'object' === typeof option && option; if (!data) { data = new FormValidation.Framework.Bootstrap(this, $.extend({}, { events: { // Support backward formInit: 'init.form.bv', formError: 'error.form.bv', formSuccess: 'success.form.bv', fieldAdded: 'added.field.bv', fieldRemoved: 'removed.field.bv', fieldInit: 'init.field.bv', fieldError: 'error.field.bv', fieldSuccess: 'success.field.bv', fieldStatus: 'status.field.bv', localeChanged: 'changed.locale.bv', validatorError: 'error.validator.bv', validatorSuccess: 'success.validator.bv' } }, options), 'bv'); $this.addClass('fv-form-bootstrap') .data('formValidation', data) .data('bootstrapValidator', data); } // Allow to call plugin method if ('string' === typeof option) { data[option].apply(data, Array.prototype.slice.call(params, 1)); } }); }; $.fn.bootstrapValidator.Constructor = FormValidation.Framework.Bootstrap; }(jQuery));