216 lines
7.6 KiB
JavaScript
Executable File
216 lines
7.6 KiB
JavaScript
Executable File
/**
|
|
* 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 <div class="form-group"></div>
|
|
// 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));
|