initial commit
This commit is contained in:
+215
@@ -0,0 +1,215 @@
|
||||
/**
|
||||
* 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));
|
||||
Reference in New Issue
Block a user