| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449 |
- /**
- * BootstrapValidator (http://bootstrapvalidator.com)
- *
- * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
- *
- * @author http://twitter.com/nghuuphuoc
- * @copyright (c) 2013 - 2014 Nguyen Huu Phuoc
- * @license MIT
- */
- (function($) {
- var BootstrapValidator = function(form, options) {
- this.$form = $(form);
- this.options = $.extend({}, BootstrapValidator.DEFAULT_OPTIONS, options);
- this.$invalidFields = $([]); // Array of invalid fields
- this.$submitButton = null; // The submit button which is clicked to submit form
- // Validating status
- this.STATUS_NOT_VALIDATED = 'NOT_VALIDATED';
- this.STATUS_VALIDATING = 'VALIDATING';
- this.STATUS_INVALID = 'INVALID';
- this.STATUS_VALID = 'VALID';
- // Determine the event that is fired when user change the field value
- // Most modern browsers supports input event except IE 7, 8.
- // IE 9 supports input event but the event is still not fired if I press the backspace key.
- // Get IE version
- // https://gist.github.com/padolsey/527683/#comment-7595
- var ieVersion = (function() {
- var v = 3, div = document.createElement('div'), a = div.all || [];
- while (div.innerHTML = '<!--[if gt IE '+(++v)+']><br><![endif]-->', a[0]);
- return v > 4 ? v : !v;
- }());
- var el = document.createElement('div');
- this._changeEvent = (ieVersion === 9 || !('oninput' in el)) ? 'keyup' : 'input';
- // The flag to indicate that the form is ready to submit when a remote/callback validator returns
- this._submitIfValid = null;
- // Field elements
- this._cacheFields = {};
- this._init();
- };
- // The default options
- BootstrapValidator.DEFAULT_OPTIONS = {
- // The form CSS class
- elementClass: 'bv-form',
- // Default invalid message
- message: 'This value is not valid',
- // The error messages container
- // It can be:
- // * 'tooltip' if you want to use Bootstrap tooltip to show error messages
- // * 'popover' if you want to use Bootstrap popover to show error messages
- // * a CSS selector indicating the container
- //
- // In the first two cases, since the tooltip/popover should be small enough, the plugin only shows only one error message
- // You also can define the message container for particular field
- container: null,
- // The field will not be live validated if its length is less than this number of characters
- threshold: null,
- // Indicate fields which won't be validated
- // By default, the plugin will not validate the following kind of fields:
- // - disabled
- // - hidden
- // - invisible
- //
- // The setting consists of jQuery filters. Accept 3 formats:
- // - A string. Use a comma to separate filter
- // - An array. Each element is a filter
- // - An array. Each element can be a callback function
- // function($field, validator) {
- // $field is jQuery object representing the field element
- // validator is the BootstrapValidator instance
- // return true or false;
- // }
- //
- // The 3 following settings are equivalent:
- //
- // 1) ':disabled, :hidden, :not(:visible)'
- // 2) [':disabled', ':hidden', ':not(:visible)']
- // 3) [':disabled', ':hidden', function($field) {
- // return !$field.is(':visible');
- // }]
- excluded: [':disabled', ':hidden', ':not(:visible)'],
- // Shows ok/error/loading icons based on the field validity.
- // 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:
- // feedbackIcons: {
- // valid: 'glyphicon glyphicon-ok',
- // invalid: 'glyphicon glyphicon-remove',
- // validating: 'glyphicon glyphicon-refresh'
- // }
- // - Use FontAwesome icons:
- // feedbackIcons: {
- // valid: 'fa fa-check',
- // invalid: 'fa fa-times',
- // validating: 'fa fa-refresh'
- // }
- feedbackIcons: {
- valid: null,
- invalid: null,
- validating: null
- },
- // The submit buttons selector
- // These buttons will be disabled to prevent the valid form from multiple submissions
- submitButtons: '[type="submit"]',
- // The custom submit handler
- // It will prevent the form from the default submission
- //
- // submitHandler: function(validator, form) {
- // - validator is the BootstrapValidator instance
- // - form is the jQuery object presenting the current form
- // }
- submitHandler: null,
- // Live validating option
- // Can be one of 3 values:
- // - enabled: The plugin validates fields as soon as they are changed
- // - disabled: Disable the live validating. The error messages are only shown after the form is submitted
- // - submitted: The live validating is enabled after the form is submitted
- live: 'enabled',
- // Map the field name with validator rules
- fields: {}
- };
- BootstrapValidator.prototype = {
- constructor: BootstrapValidator,
- /**
- * Init form
- */
- _init: function() {
- var that = this,
- options = {
- excluded: this.$form.attr('data-bv-excluded'),
- trigger: this.$form.attr('data-bv-trigger'),
- message: this.$form.attr('data-bv-message'),
- container: this.$form.attr('data-bv-container'),
- submitButtons: this.$form.attr('data-bv-submitbuttons'),
- threshold: this.$form.attr('data-bv-threshold'),
- live: this.$form.attr('data-bv-live'),
- fields: {},
- feedbackIcons: {
- valid: this.$form.attr('data-bv-feedbackicons-valid'),
- invalid: this.$form.attr('data-bv-feedbackicons-invalid'),
- validating: this.$form.attr('data-bv-feedbackicons-validating')
- }
- };
- this.$form
- // Disable client side validation in HTML 5
- .attr('novalidate', 'novalidate')
- .addClass(this.options.elementClass)
- // Disable the default submission first
- .on('submit.bv', function(e) {
- e.preventDefault();
- that.validate();
- })
- .on('click.bv', this.options.submitButtons, function() {
- that.$submitButton = $(this);
- // The user just click the submit button
- that._submitIfValid = true;
- })
- // Find all fields which have either "name" or "data-bv-field" attribute
- .find('[name], [data-bv-field]')
- .each(function() {
- var $field = $(this);
- if (that._isExcluded($field)) {
- return;
- }
- var field = $field.attr('name') || $field.attr('data-bv-field'),
- opts = that._parseOptions($field);
- if (opts) {
- $field.attr('data-bv-field', field);
- options.fields[field] = $.extend({}, opts, options.fields[field]);
- }
- });
- this.options = $.extend(true, this.options, options);
- for (var field in this.options.fields) {
- this._initField(field);
- }
- this.$form.trigger($.Event('init.form.bv'), {
- options: this.options
- });
- },
- /**
- * Parse the validator options from HTML attributes
- *
- * @param {jQuery} $field The field element
- * @returns {Object}
- */
- _parseOptions: function($field) {
- var field = $field.attr('name') || $field.attr('data-bv-field'),
- validators = {},
- validator,
- v, // Validator name
- enabled,
- optionName,
- optionValue,
- html5AttrName,
- html5AttrMap;
- for (v in $.fn.bootstrapValidator.validators) {
- validator = $.fn.bootstrapValidator.validators[v];
- enabled = $field.attr('data-bv-' + v.toLowerCase()) + '';
- html5AttrMap = ('function' == typeof validator.enableByHtml5) ? validator.enableByHtml5($field) : null;
- if ((html5AttrMap && enabled != 'false')
- || (html5AttrMap !== true && ('' == enabled || 'true' == enabled)))
- {
- // Try to parse the options via attributes
- validator.html5Attributes = validator.html5Attributes || { message: 'message' };
- validators[v] = $.extend({}, html5AttrMap == true ? {} : html5AttrMap, validators[v]);
- for (html5AttrName in validator.html5Attributes) {
- optionName = validator.html5Attributes[html5AttrName];
- optionValue = $field.attr('data-bv-' + v.toLowerCase() + '-' + html5AttrName);
- if (optionValue) {
- if ('true' == optionValue) {
- optionValue = true;
- } else if ('false' == optionValue) {
- optionValue = false;
- }
- validators[v][optionName] = optionValue;
- }
- }
- }
- }
- var opts = {
- feedbackIcons: $field.attr('data-bv-feedbackicons'),
- trigger: $field.attr('data-bv-trigger'),
- message: $field.attr('data-bv-message'),
- container: $field.attr('data-bv-container'),
- selector: $field.attr('data-bv-selector'),
- threshold: $field.attr('data-bv-threshold'),
- validators: validators
- },
- emptyOptions = $.isEmptyObject(opts), // Check if the field options are set using HTML attributes
- emptyValidators = $.isEmptyObject(validators); // Check if the field validators are set using HTML attributes
- if (!emptyValidators || (!emptyOptions && this.options.fields[field])) {
- opts.validators = validators;
- return opts;
- } else {
- return null;
- }
- },
- /**
- * Init field
- *
- * @param {String|jQuery} field The field name or field element
- */
- _initField: function(field) {
- var fields = $([]);
- switch (typeof field) {
- case 'object':
- fields = field;
- field = field.attr('data-bv-field');
- break;
- case 'string':
- fields = this.getFieldElements(field);
- fields.attr('data-bv-field', field);
- break;
- default:
- break;
- }
- if (this.options.fields[field] == null || this.options.fields[field].validators == null) {
- return;
- }
- // We don't need to validate non-existing fields
- if (fields.length == 0) {
- delete this.options.fields[field];
- return;
- }
- for (var validatorName in this.options.fields[field].validators) {
- if (!$.fn.bootstrapValidator.validators[validatorName]) {
- delete this.options.fields[field].validators[validatorName];
- }
- }
- if (this.options.fields[field]['enabled'] == null) {
- this.options.fields[field]['enabled'] = true;
- }
- var that = this,
- total = fields.length,
- type = fields.attr('type'),
- updateAll = (total == 1) || ('radio' == type) || ('checkbox' == type);
- for (var i = 0; i < total; i++) {
- var $field = fields.eq(i),
- $parent = $field.parents('.form-group'),
- // Allow user to indicate where the error messages are shown
- container = this.options.fields[field].container || this.options.container,
- $message = (container && container != 'tooltip' && container != 'popover') ? $(container) : this._getMessageContainer($field);
- if (container && container != 'tooltip' && container != 'popover') {
- $message.addClass('has-error');
- }
- // Remove all error messages and feedback icons
- $message.find('.help-block[data-bv-validator][data-bv-for="' + field + '"]').remove();
- $parent.find('i[data-bv-icon-for="' + field + '"]').remove();
- // Whenever the user change the field value, mark it as not validated yet
- var event = ('radio' == type || 'checkbox' == type || 'file' == type || 'SELECT' == $field.get(0).tagName) ? 'change' : this._changeEvent;
- $field.off(event + '.update.bv').on(event + '.update.bv', function() {
- // Reset the flag
- that._submitIfValid = false;
- that.updateStatus($(this), that.STATUS_NOT_VALIDATED);
- });
- // Create help block elements for showing the error messages
- $field.data('bv.messages', $message);
- for (var validatorName in this.options.fields[field].validators) {
- $field.data('bv.result.' + validatorName, this.STATUS_NOT_VALIDATED);
- if (!updateAll || i == total - 1) {
- $('<small/>')
- .css('display', 'none')
- .addClass('help-block')
- .attr('data-bv-validator', validatorName)
- .attr('data-bv-for', field)
- .attr('data-bv-result', this.STATUS_NOT_VALIDATED)
- .html(this.options.fields[field].validators[validatorName].message || this.options.fields[field].message || this.options.message)
- .appendTo($message);
- }
- }
- // Prepare the feedback icons
- // Available from Bootstrap 3.1 (http://getbootstrap.com/css/#forms-control-validation)
- if (this.options.fields[field].feedbackIcons !== false && this.options.fields[field].feedbackIcons !== 'false'
- && this.options.feedbackIcons
- && this.options.feedbackIcons.validating && this.options.feedbackIcons.invalid && this.options.feedbackIcons.valid
- && (!updateAll || i == total - 1))
- {
- $parent.removeClass('has-success').removeClass('has-error').addClass('has-feedback');
- var $icon = $('<i/>')
- .css('display', 'none')
- .addClass('form-control-feedback')
- .attr('data-bv-icon-for', field)
- // Place it after the label containing the checkbox/radio
- // so when clicking the icon, it doesn't effect to the checkbox/radio element
- .insertAfter(('checkbox' == type || 'radio' == type) ? $field.parent() : $field);
- // 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.css('top', 0);
- }
- // Fix feedback icons in input-group
- if ($parent.find('.input-group-addon').length != 0) {
- $icon.css({
- 'top': 0,
- 'z-index': 100
- });
- }
- }
- }
- // Set live mode
- var trigger = this.options.fields[field].trigger || this.options.trigger || event,
- events = $.map(trigger.split(' '), function(item) {
- return item + '.live.bv';
- }).join(' ');
- switch (this.options.live) {
- case 'submitted':
- break;
- case 'disabled':
- fields.off(events);
- break;
- case 'enabled':
- default:
- fields.off(events).on(events, function() {
- if (that._exceedThreshold($(this))) {
- that.validateField($(this));
- }
- });
- break;
- }
- this.$form.trigger($.Event('init.field.bv'), {
- field: field,
- element: fields
- });
- },
- /**
- * Get the element to place the error messages
- *
- * @param {jQuery} $field The field element
- * @returns {jQuery}
- */
- _getMessageContainer: function($field) {
- var $parent = $field.parent();
- if ($parent.hasClass('form-group')) {
- return $parent;
- }
- var cssClasses = $parent.attr('class');
- if (!cssClasses) {
- return this._getMessageContainer($parent);
- }
- cssClasses = cssClasses.split(' ');
- var n = cssClasses.length;
- for (var i = 0; i < n; i++) {
- if (/^col-(xs|sm|md|lg)-\d+$/.test(cssClasses[i]) || /^col-(xs|sm|md|lg)-offset-\d+$/.test(cssClasses[i])) {
- return $parent;
- }
- }
- return this._getMessageContainer($parent);
- },
- /**
- * Called when all validations are completed
- */
- _submit: function() {
- var isValid = this.isValid(),
- eventType = isValid ? 'success.form.bv' : 'error.form.bv',
- e = $.Event(eventType);
- this.$form.trigger(e);
- // Call default handler
- // Check if whether the submit button is clicked
- if (this.$submitButton) {
- isValid ? this._onSuccess(e) : this._onError(e);
- }
- },
- /**
- * Check if the field is excluded.
- * Returning true means that the field will not be validated
- *
- * @param {jQuery} $field The field element
- * @returns {Boolean}
- */
- _isExcluded: function($field) {
- if (this.options.excluded) {
- // Convert to array first
- if ('string' == typeof this.options.excluded) {
- this.options.excluded = $.map(this.options.excluded.split(','), function(item) {
- // Trim the spaces
- return $.trim(item);
- });
- }
- var length = this.options.excluded.length;
- for (var i = 0; i < length; i++) {
- if (('string' == typeof this.options.excluded[i] && $field.is(this.options.excluded[i]))
- || ('function' == typeof this.options.excluded[i] && this.options.excluded[i].call(this, $field, this) == true))
- {
- return true;
- }
- }
- }
- return false;
- },
- /**
- * Check if the number of characters of field value exceed the threshold or not
- *
- * @param {jQuery} $field The field element
- * @returns {Boolean}
- */
- _exceedThreshold: function($field) {
- var field = $field.attr('data-bv-field'),
- threshold = this.options.fields[field].threshold || this.options.threshold;
- if (!threshold) {
- return true;
- }
- var cannotType = $.inArray($field.attr('type'), ['button', 'checkbox', 'file', 'hidden', 'image', 'radio', 'reset', 'submit']) != -1;
- return (cannotType || $field.val().length >= threshold);
- },
-
- // --- Events ---
- /**
- * The default handler of error.form.bv event.
- * It will be called when there is a invalid field
- *
- * @param {jQuery.Event} e The jQuery event object
- */
- _onError: function(e) {
- if (e.isDefaultPrevented()) {
- return;
- }
- if ('submitted' == this.options.live) {
- // Enable live mode
- this.options.live = 'enabled';
- var that = this;
- for (var field in this.options.fields) {
- (function(f) {
- var fields = that.getFieldElements(f);
- if (fields.length) {
- var type = $(fields[0]).attr('type'),
- event = ('radio' == type || 'checkbox' == type || 'file' == type || 'SELECT' == $(fields[0]).get(0).tagName) ? 'change' : that._changeEvent,
- trigger = that.options.fields[field].trigger || that.options.trigger || event,
- events = $.map(trigger.split(' '), function(item) {
- return item + '.live.bv';
- }).join(' ');
- fields.off(events).on(events, function() {
- if (that._exceedThreshold($(this))) {
- that.validateField($(this));
- }
- });
- }
- })(field);
- }
- }
- var $invalidField = this.$invalidFields.eq(0);
- if ($invalidField) {
- // Activate the tab containing the invalid field if exists
- var $tabPane = $invalidField.parents('.tab-pane'), tabId;
- if ($tabPane && (tabId = $tabPane.attr('id'))) {
- $('a[href="#' + tabId + '"][data-toggle="tab"]').tab('show');
- }
- // Focus to the first invalid field
- $invalidField.focus();
- }
- },
- /**
- * The default handler of success.form.bv event.
- * It will be called when all the fields are valid
- *
- * @param {jQuery.Event} e The jQuery event object
- */
- _onSuccess: function(e) {
- if (e.isDefaultPrevented()) {
- return;
- }
- // Call the custom submission if enabled
- if (this.options.submitHandler && 'function' == typeof this.options.submitHandler) {
- // If you want to submit the form inside your submit handler, please call defaultSubmit() method
- this.options.submitHandler.call(this, this, this.$form);
- } else {
- this.disableSubmitButtons(true).defaultSubmit();
- }
- },
- /**
- * Called after validating a field element
- *
- * @param {jQuery} $field The field element
- * @param {String} [validatorName] The validator name
- */
- _onFieldValidated: function($field, validatorName) {
- var field = $field.attr('data-bv-field'),
- validators = this.options.fields[field].validators,
- counter = {},
- numValidators = 0;
- // Trigger an event after given validator completes
- if (validatorName) {
- var data = {
- field: field,
- element: $field,
- validator: validatorName
- };
- switch ($field.data('bv.result.' + validatorName)) {
- case this.STATUS_INVALID:
- this.$form.trigger($.Event('error.validator.bv'), data);
- break;
- case this.STATUS_VALID:
- this.$form.trigger($.Event('success.validator.bv'), data);
- break;
- default:
- break;
- }
- }
- counter[this.STATUS_NOT_VALIDATED] = 0;
- counter[this.STATUS_VALIDATING] = 0;
- counter[this.STATUS_INVALID] = 0;
- counter[this.STATUS_VALID] = 0;
- for (var v in validators) {
- numValidators++;
- var result = $field.data('bv.result.' + v);
- if (result) {
- counter[result]++;
- }
- }
- if (counter[this.STATUS_VALID] == numValidators) {
- // Remove from the list of invalid fields
- this.$invalidFields = this.$invalidFields.not($field);
- this.$form.trigger($.Event('success.field.bv'), {
- field: field,
- element: $field
- });
- }
- // If all validators are completed and there is at least one validator which doesn't pass
- else if (counter[this.STATUS_NOT_VALIDATED] == 0 && counter[this.STATUS_VALIDATING] == 0 && counter[this.STATUS_INVALID] > 0) {
- // Add to the list of invalid fields
- this.$invalidFields = this.$invalidFields.add($field);
- this.$form.trigger($.Event('error.field.bv'), {
- field: field,
- element: $field
- });
- }
- },
- // --- Public methods ---
- /**
- * Retrieve the field elements by given name
- *
- * @param {String} field The field name
- * @returns {null|jQuery[]}
- */
- getFieldElements: function(field) {
- if (!this._cacheFields[field]) {
- this._cacheFields[field] = (this.options.fields[field] && this.options.fields[field].selector)
- ? $(this.options.fields[field].selector)
- : this.$form.find('[name="' + field + '"]');
- }
- return this._cacheFields[field];
- },
- /**
- * Disable/enable submit buttons
- *
- * @param {Boolean} disabled Can be true or false
- * @returns {BootstrapValidator}
- */
- disableSubmitButtons: function(disabled) {
- if (!disabled) {
- this.$form.find(this.options.submitButtons).removeAttr('disabled');
- } else if (this.options.live != 'disabled') {
- // Don't disable if the live validating mode is disabled
- this.$form.find(this.options.submitButtons).attr('disabled', 'disabled');
- }
- return this;
- },
- /**
- * Validate the form
- *
- * @returns {BootstrapValidator}
- */
- validate: function() {
- if (!this.options.fields) {
- return this;
- }
- this.disableSubmitButtons(true);
- for (var field in this.options.fields) {
- this.validateField(field);
- }
- this._submit();
- return this;
- },
- /**
- * Validate given field
- *
- * @param {String|jQuery} field The field name or field element
- * @returns {BootstrapValidator}
- */
- validateField: function(field) {
- var fields = $([]), type;
- switch (typeof field) {
- case 'object':
- fields = field;
- field = field.attr('data-bv-field');
- break;
- case 'string':
- fields = this.getFieldElements(field);
- break;
- default:
- break;
- }
- if (this.options.fields[field] && this.options.fields[field]['enabled'] == false) {
- return this;
- }
- var that = this,
- type = fields.attr('type'),
- total = ('radio' == type || 'checkbox' == type) ? 1 : fields.length,
- updateAll = ('radio' == type || 'checkbox' == type),
- validators = this.options.fields[field].validators,
- validatorName,
- validateResult;
- for (var i = 0; i < total; i++) {
- var $field = fields.eq(i);
- if (this._isExcluded($field)) {
- continue;
- }
- for (validatorName in validators) {
- if ($field.data('bv.dfs.' + validatorName)) {
- $field.data('bv.dfs.' + validatorName).reject();
- }
- // Don't validate field if it is already done
- var result = $field.data('bv.result.' + validatorName);
- if (result == this.STATUS_VALID || result == this.STATUS_INVALID) {
- this._onFieldValidated($field, validatorName);
- continue;
- }
- $field.data('bv.result.' + validatorName, this.STATUS_VALIDATING);
- validateResult = $.fn.bootstrapValidator.validators[validatorName].validate(this, $field, validators[validatorName]);
- // validateResult can be a $.Deferred object ...
- if ('object' == typeof validateResult) {
- this.updateStatus(updateAll ? field : $field, this.STATUS_VALIDATING, validatorName);
- $field.data('bv.dfs.' + validatorName, validateResult);
- validateResult.done(function($f, v, isValid, message) {
- // v is validator name
- $f.removeData('bv.dfs.' + v);
- if (message) {
- // Update the error message
- $field.data('bv.messages').find('.help-block[data-bv-validator="' + v + '"][data-bv-for="' + $f.attr('data-bv-field') + '"]').html(message);
- }
- that.updateStatus(updateAll ? $f.attr('data-bv-field') : $f, isValid ? that.STATUS_VALID : that.STATUS_INVALID, v);
- if (isValid && that._submitIfValid == true) {
- // If a remote validator returns true and the form is ready to submit, then do it
- that._submit();
- }
- });
- }
- // ... or a boolean value
- else if ('boolean' == typeof validateResult) {
- this.updateStatus(updateAll ? field : $field, validateResult ? this.STATUS_VALID : this.STATUS_INVALID, validatorName);
- }
- }
- }
- return this;
- },
- /**
- * Update all validating results of field
- *
- * @param {String|jQuery} field The field name or field element
- * @param {String} status The status. Can be 'NOT_VALIDATED', 'VALIDATING', 'INVALID' or 'VALID'
- * @param {String} [validatorName] The validator name. If null, the method updates validity result for all validators
- * @returns {BootstrapValidator}
- */
- updateStatus: function(field, status, validatorName) {
- var fields = $([]), type;
- switch (typeof field) {
- case 'object':
- fields = field;
- field = field.attr('data-bv-field');
- break;
- case 'string':
- fields = this.getFieldElements(field);
- break;
- default:
- break;
- }
- var that = this,
- type = fields.attr('type'),
- total = ('radio' == type || 'checkbox' == type) ? 1 : fields.length;
- for (var i = 0; i < total; i++) {
- var $field = fields.eq(i),
- $parent = $field.parents('.form-group'),
- $message = $field.data('bv.messages'),
- $allErrors = $message.find('.help-block[data-bv-validator][data-bv-for="' + field + '"]'),
- $errors = validatorName ? $allErrors.filter('[data-bv-validator="' + validatorName + '"]') : $allErrors,
- $icon = $parent.find('.form-control-feedback[data-bv-icon-for="' + field + '"]'),
- container = this.options.fields[field].container || this.options.container,
- isValidField = null;
- // Update status
- if (validatorName) {
- $field.data('bv.result.' + validatorName, status);
- } else {
- for (var v in this.options.fields[field].validators) {
- $field.data('bv.result.' + v, status);
- }
- }
- // Show/hide error elements and feedback icons
- $errors.attr('data-bv-result', status);
- // Determine the tab containing the element
- var $tabPane = $field.parents('.tab-pane'),
- tabId, $tab;
- if ($tabPane && (tabId = $tabPane.attr('id'))) {
- $tab = $('a[href="#' + tabId + '"][data-toggle="tab"]').parent();
- }
- switch (status) {
- case this.STATUS_VALIDATING:
- isValidField = null;
- this.disableSubmitButtons(true);
- $parent.removeClass('has-success').removeClass('has-error');
- if ($icon) {
- $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).addClass(this.options.feedbackIcons.validating).show();
- }
- if ($tab) {
- $tab.removeClass('bv-tab-success').removeClass('bv-tab-error');
- }
- break;
- case this.STATUS_INVALID:
- isValidField = false;
- this.disableSubmitButtons(true);
- $parent.removeClass('has-success').addClass('has-error');
- if ($icon) {
- $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.validating).addClass(this.options.feedbackIcons.invalid).show();
- }
- if ($tab) {
- $tab.removeClass('bv-tab-success').addClass('bv-tab-error');
- }
- break;
- case this.STATUS_VALID:
- // If the field is valid (passes all validators)
- isValidField = ($allErrors.filter('[data-bv-result="' + this.STATUS_NOT_VALIDATED +'"]').length == 0)
- ? ($allErrors.filter('[data-bv-result="' + this.STATUS_VALID +'"]').length == $allErrors.length) // All validators are completed
- : null; // There are some validators that have not done
- if (isValidField != null) {
- this.disableSubmitButtons(this.$submitButton ? !this.isValid() : !isValidField);
- if ($icon) {
- $icon
- .removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).removeClass(this.options.feedbackIcons.valid)
- .addClass(isValidField ? this.options.feedbackIcons.valid : this.options.feedbackIcons.invalid)
- .show();
- }
- }
- $parent.removeClass('has-error has-success').addClass(this.isValidContainer($parent) ? 'has-success' : 'has-error');
- if ($tab) {
- $tab.removeClass('bv-tab-success').removeClass('bv-tab-error').addClass(this.isValidContainer($tabPane) ? 'bv-tab-success' : 'bv-tab-error');
- }
- break;
- case this.STATUS_NOT_VALIDATED:
- default:
- isValidField = null;
- this.disableSubmitButtons(false);
- $parent.removeClass('has-success').removeClass('has-error');
- if ($icon) {
- $icon.removeClass(this.options.feedbackIcons.valid).removeClass(this.options.feedbackIcons.invalid).removeClass(this.options.feedbackIcons.validating).hide();
- }
- if ($tab) {
- $tab.removeClass('bv-tab-success').removeClass('bv-tab-error');
- }
- break;
- }
- switch (true) {
- // Only show the first error message if it is placed inside a tooltip ...
- case ($icon && 'tooltip' == container):
- (isValidField === false)
- ? $icon.css('cursor', 'pointer').tooltip('destroy').tooltip({
- html: true,
- placement: 'top',
- title: $allErrors.filter('[data-bv-result="' + that.STATUS_INVALID + '"]').eq(0).html()
- })
- : $icon.css('cursor', '').tooltip('destroy');
- break;
- // ... or popover
- case ($icon && 'popover' == container):
- (isValidField === false)
- ? $icon.css('cursor', 'pointer').popover('destroy').popover({
- content: $allErrors.filter('[data-bv-result="' + that.STATUS_INVALID + '"]').eq(0).html(),
- html: true,
- placement: 'top',
- trigger: 'hover click'
- })
- : $icon.css('cursor', '').popover('destroy');
- break;
- default:
- (status == this.STATUS_INVALID) ? $errors.show() : $errors.hide();
- break;
- }
- // Trigger an event
- this.$form.trigger($.Event('status.field.bv'), {
- field: field,
- element: $field,
- status: status
- });
- this._onFieldValidated($field, validatorName);
- }
- return this;
- },
- /**
- * Check the form validity
- *
- * @returns {Boolean}
- */
- isValid: function() {
- for (var field in this.options.fields) {
- if (!this.isValidField(field)) {
- return false;
- }
- }
- return true;
- },
- /**
- * Check if the field is valid or not
- *
- * @param {String|jQuery} field The field name or field element
- * @returns {Boolean}
- */
- isValidField: function(field) {
- var fields = $([]);
- switch (typeof field) {
- case 'object':
- fields = field;
- field = field.attr('data-bv-field');
- break;
- case 'string':
- fields = this.getFieldElements(field);
- break;
- default:
- break;
- }
- if (fields.length == 0 || this.options.fields[field] == null || this.options.fields[field]['enabled'] == false) {
- return true;
- }
- var type = fields.attr('type'),
- total = ('radio' == type || 'checkbox' == type) ? 1 : fields.length,
- $field, validatorName, status;
- for (var i = 0; i < total; i++) {
- $field = fields.eq(i);
- if (this._isExcluded($field)) {
- continue;
- }
- for (validatorName in this.options.fields[field].validators) {
- status = $field.data('bv.result.' + validatorName);
- if (status != this.STATUS_VALID) {
- return false;
- }
- }
- }
- return true;
- },
- /**
- * Check if all fields inside a given container are valid.
- * It's useful when working with a wizard-like such as tab, collapse
- *
- * @param {jQuery} $container The container element
- * @returns {Boolean}
- */
- isValidContainer: function($container) {
- var that = this, map = {};
- $container.find('[data-bv-field]').each(function() {
- var field = $(this).attr('data-bv-field');
- if (!map[field]) {
- map[field] = $(this);
- }
- });
- for (var field in map) {
- var $f = map[field];
- if ($f.data('bv.messages')
- .find('.help-block[data-bv-validator][data-bv-for="' + field + '"]')
- .filter(function() {
- var v = $(this).attr('data-bv-validator');
- return ($f.data('bv.result.' + v) && $f.data('bv.result.' + v) != that.STATUS_VALID);
- })
- .length != 0)
- {
- // The field is not valid
- return false;
- }
- }
- return true;
- },
- /**
- * Submit the form using default submission.
- * It also does not perform any validations when submitting the form
- *
- * It might be used when you want to submit the form right inside the submitHandler()
- */
- defaultSubmit: function() {
- if (this.$submitButton) {
- // Create hidden input to send the submit buttons
- $('<input/>')
- .attr('type', 'hidden')
- .attr('data-bv-submit-hidden', '')
- .attr('name', this.$submitButton.attr('name'))
- .val(this.$submitButton.val())
- .appendTo(this.$form);
- }
- // Submit form
- this.$form.off('submit.bv').submit();
- },
- // Useful APIs which aren't used internally
- /**
- * Get the list of invalid fields
- *
- * @returns {jQuery[]}
- */
- getInvalidFields: function() {
- return this.$invalidFields;
- },
- /**
- * Returns the clicked submit button
- *
- * @returns {jQuery}
- */
- getSubmitButton: function() {
- return this.$submitButton;
- },
- /**
- * Get the error messages
- *
- * @param {String|jQuery} [field] The field name or field element
- * If the field is not defined, the method returns all error messages of all fields
- * @returns {String[]}
- */
- getErrors: function(field) {
- var that = this,
- messages = [],
- $fields = $([]);
- switch (true) {
- case (field && 'object' == typeof field):
- $fields = field;
- break;
- case (field && 'string' == typeof field):
- var f = this.getFieldElements(field);
- if (f.length > 0) {
- var type = f.attr('type');
- $fields = ('radio' == type || 'checkbox' == type) ? f.eq(0) : f;
- }
- break;
- default:
- $fields = this.$invalidFields;
- break;
- }
- $fields.each(function() {
- messages = messages.concat(
- $(this)
- .data('bv.messages')
- .find('.help-block[data-bv-for="' + $(this).attr('data-bv-field') + '"][data-bv-result="' + that.STATUS_INVALID + '"]')
- .map(function() {
- return $(this).html()
- })
- .get()
- );
- });
- return messages;
- },
- /**
- * Add a new field
- *
- * @param {String|jQuery} field The field name or field element
- * @param {Object} [options] The validator rules
- * @returns {BootstrapValidator}
- */
- addField: function(field, options) {
- var fields = $([]);
- switch (typeof field) {
- case 'object':
- fields = field;
- field = field.attr('data-bv-field') || field.attr('name');
- break;
- case 'string':
- delete this._cacheFields[field];
- fields = this.getFieldElements(field);
- break;
- default:
- break;
- }
- fields.attr('data-bv-field', field);
- var type = fields.attr('type'),
- total = ('radio' == type || 'checkbox' == type) ? 1 : fields.length;
- for (var i = 0; i < total; i++) {
- var $field = fields.eq(i);
- // Try to parse the options from HTML attributes
- var opts = this._parseOptions($field);
- opts = (opts == null) ? options : $.extend(true, options, opts);
- this.options.fields[field] = $.extend(true, this.options.fields[field], opts);
- // Update the cache
- this._cacheFields[field] = this._cacheFields[field] ? this._cacheFields[field].add($field) : $field;
- // Init the element
- this._initField(('checkbox' == type || 'radio' == type) ? field : $field);
- }
- this.disableSubmitButtons(false);
- // Trigger an event
- this.$form.trigger($.Event('added.field.bv'), {
- field: field,
- element: fields,
- options: this.options.fields[field]
- });
- return this;
- },
- /**
- * Remove a given field
- *
- * @param {String|jQuery} field The field name or field element
- * @returns {BootstrapValidator}
- */
- removeField: function(field) {
- var fields = $([]);
- switch (typeof field) {
- case 'object':
- fields = field;
- field = field.attr('data-bv-field') || field.attr('name');
- fields.attr('data-bv-field', field);
- break;
- case 'string':
- fields = this.getFieldElements(field);
- break;
- default:
- break;
- }
- if (fields.length == 0) {
- return this;
- }
- var type = fields.attr('type'),
- total = ('radio' == type || 'checkbox' == type) ? 1 : fields.length;
- for (var i = 0; i < total; i++) {
- var $field = fields.eq(i);
- // Remove from the list of invalid fields
- this.$invalidFields = this.$invalidFields.not($field);
- // Update the cache
- this._cacheFields[field] = this._cacheFields[field].not($field);
- }
- if (!this._cacheFields[field] || this._cacheFields[field].length == 0) {
- delete this.options.fields[field];
- }
- if ('checkbox' == type || 'radio' == type) {
- this._initField(field);
- }
- this.disableSubmitButtons(false);
- // Trigger an event
- this.$form.trigger($.Event('removed.field.bv'), {
- field: field,
- element: fields
- });
- return this;
- },
- /**
- * Reset the form
- *
- * @param {Boolean} [resetFormData] Reset current form data
- * @returns {BootstrapValidator}
- */
- resetForm: function(resetFormData) {
- var field, fields, total, type, validator;
- for (field in this.options.fields) {
- fields = this.getFieldElements(field);
- total = fields.length;
- for (var i = 0; i < total; i++) {
- for (validator in this.options.fields[field].validators) {
- fields.eq(i).removeData('bv.dfs.' + validator);
- }
- }
- // Mark field as not validated yet
- this.updateStatus(field, this.STATUS_NOT_VALIDATED);
- if (resetFormData) {
- type = fields.attr('type');
- ('radio' == type || 'checkbox' == type) ? fields.removeAttr('checked').removeAttr('selected') : fields.val('');
- }
- }
- this.$invalidFields = $([]);
- this.$submitButton = null;
- // Enable submit buttons
- this.disableSubmitButtons(false);
- return this;
- },
- /**
- * Enable/Disable all validators to given field
- *
- * @param {String} field The field name
- * @param {Boolean} enabled Enable/Disable field validators
- * @returns {BootstrapValidator}
- */
- enableFieldValidators: function(field, enabled) {
- this.options.fields[field]['enabled'] = enabled;
- this.updateStatus(field, this.STATUS_NOT_VALIDATED);
- return this;
- },
- /**
- * Destroy the plugin
- * It will remove all error messages, feedback icons and turn off the events
- */
- destroy: function() {
- var field, fields, $field, validator, $icon, container;
- for (field in this.options.fields) {
- fields = this.getFieldElements(field);
- container = this.options.fields[field].container || this.options.container;
- for (var i = 0; i < fields.length; i++) {
- $field = fields.eq(i);
- $field
- // Remove all error messages
- .data('bv.messages')
- .find('.help-block[data-bv-validator][data-bv-for="' + field + '"]').remove().end()
- .end()
- .removeData('bv.messages')
- // Remove feedback classes
- .parents('.form-group')
- .removeClass('has-feedback has-error has-success')
- .end()
- // Turn off events
- .off('.bv')
- .removeAttr('data-bv-field');
- // Remove feedback icons, tooltip/popover container
- $icon = $field.parents('.form-group').find('i[data-bv-icon-for="' + field + '"]');
- if ($icon) {
- switch (container) {
- case 'tooltip':
- $icon.tooltip('destroy').remove();
- break;
- case 'popover':
- $icon.popover('destroy').remove();
- break;
- default:
- $icon.remove();
- break;
- }
- }
- for (validator in this.options.fields[field].validators) {
- $field.removeData('bv.result.' + validator).removeData('bv.dfs.' + validator);
- }
- }
- }
- // Enable submit buttons
- this.disableSubmitButtons(false);
- this.$form
- .removeClass(this.options.elementClass)
- .off('.bv')
- .removeData('bootstrapValidator')
- // Remove generated hidden elements
- .find('[data-bv-submit-hidden]').remove();
- }
- };
- // Plugin definition
- $.fn.bootstrapValidator = function(option) {
- var params = arguments;
- return this.each(function() {
- var $this = $(this),
- data = $this.data('bootstrapValidator'),
- options = 'object' == typeof option && option;
- if (!data) {
- data = new BootstrapValidator(this, options);
- $this.data('bootstrapValidator', data);
- }
- // Allow to call plugin method
- if ('string' == typeof option) {
- data[option].apply(data, Array.prototype.slice.call(params, 1));
- }
- });
- };
- // Available validators
- $.fn.bootstrapValidator.validators = {};
- $.fn.bootstrapValidator.Constructor = BootstrapValidator;
- // Helper methods, which can be used in validator class
- $.fn.bootstrapValidator.helpers = {
- /**
- * Validate a date
- *
- * @param {Number} year The full year in 4 digits
- * @param {Number} month The month number
- * @param {Number} day The day number
- * @param {Boolean} [notInFuture] If true, the date must not be in the future
- * @returns {Boolean}
- */
- date: function(year, month, day, notInFuture) {
- if (isNaN(year) || isNaN(month) || isNaN(day)) {
- return false;
- }
- if (year < 1000 || year > 9999 || month == 0 || month > 12) {
- return false;
- }
- var numDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
- // Update the number of days in Feb of leap year
- if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) {
- numDays[1] = 29;
- }
- // Check the day
- if (day < 0 || day > numDays[month - 1]) {
- return false;
- }
- if (notInFuture === true) {
- var currentDate = new Date(),
- currentYear = currentDate.getFullYear(),
- currentMonth = currentDate.getMonth(),
- currentDay = currentDate.getDate();
- return (year < currentYear
- || (year == currentYear && month - 1 < currentMonth)
- || (year == currentYear && month - 1 == currentMonth && day < currentDay));
- }
- return true;
- },
- /**
- * Implement Luhn validation algorithm
- * Credit to https://gist.github.com/ShirtlessKirk/2134376
- *
- * @see http://en.wikipedia.org/wiki/Luhn
- * @param {String} value
- * @returns {Boolean}
- */
- luhn: function(value) {
- var length = value.length,
- mul = 0,
- prodArr = [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 2, 4, 6, 8, 1, 3, 5, 7, 9]],
- sum = 0;
- while (length--) {
- sum += prodArr[mul][parseInt(value.charAt(length), 10)];
- mul ^= 1;
- }
- return (sum % 10 === 0 && sum > 0);
- },
- /**
- * Implement modulus 11, 10 (ISO 7064) algorithm
- *
- * @param {String} value
- * @returns {Boolean}
- */
- mod_11_10: function(value) {
- var check = 5,
- length = value.length;
- for (var i = 0; i < length; i++) {
- check = (((check || 10) * 2) % 11 + parseInt(value.charAt(i), 10)) % 10;
- }
- return (check == 1);
- },
- /**
- * Implements Mod 37, 36 (ISO 7064) algorithm
- * Usages:
- * mod_37_36('A12425GABC1234002M')
- * mod_37_36('002006673085', '0123456789')
- *
- * @param {String} value
- * @param {String} alphabet
- * @returns {Boolean}
- */
- mod_37_36: function(value, alphabet) {
- alphabet = alphabet || '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
- var modulus = alphabet.length,
- length = value.length,
- check = Math.floor(modulus / 2);
- for (var i = 0; i < length; i++) {
- check = (((check || modulus) * 2) % (modulus + 1) + alphabet.indexOf(value.charAt(i))) % modulus;
- }
- return (check == 1);
- }
- };
- }(window.jQuery));
|