/** * FormValidation (http://formvalidation.io) * The best jQuery plugin to validate form fields. Support Bootstrap, Foundation, Pure, SemanticUI, UIKit and custom frameworks * * @author https://twitter.com/formvalidation * @copyright (c) 2013 - 2016 Nguyen Huu Phuoc * @license http://formvalidation.io/license/ */ /** * This class supports validating Bootstrap 4 alpha form (http://v4-alpha.getbootstrap.com/) */ (function($) { FormValidation.Framework.Bootstrap4 = function(element, options, namespace) { options = $.extend(true, { button: { selector: '[type="submit"]:not([formnovalidate])', // The class of disabled button disabled: 'disabled' }, err: { // http://v4-alpha.getbootstrap.com/components/forms/#validation clazz: 'form-control-feedback', parent: '^(.*)(col|offset)-(xs|sm|md|lg)-[0-9]+(.*)$' }, // - 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: 'fv-control-feedback' }, row: { // By default, each field is placed inside the
// http://v4-alpha.getbootstrap.com/components/forms/#form-groups selector: '.form-group', valid: 'has-success', invalid: 'has-warning', feedback: 'fv-has-feedback' } }, options); FormValidation.Base.apply(this, [element, options, namespace]); }; FormValidation.Framework.Bootstrap4.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('form-check')) { $icon.insertAfter($fieldParent); } else if ($fieldParent.parent().hasClass('form-check')) { $icon.insertAfter($fieldParent.parent()); } } // 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: 'top', trigger: 'hover click' }); break; case 'tooltip': /* falls through */ default: $icon .css({ 'cursor': 'pointer', 'pointer-events': 'auto' }) .tooltip('dispose') .tooltip({ container: 'body', html: true, placement: '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('dispose'); 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; } } } }); }(jQuery));