mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-12 23:11:38 +08:00
281 lines
10 KiB
JavaScript
281 lines
10 KiB
JavaScript
/*!
|
|
* 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-03-13 8:15:45 AM
|
|
* @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 <div class="form-group"></div>
|
|
// 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 <form>
|
|
* });
|
|
*/
|
|
$.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));
|