mirror of
https://github.com/a2nt/webpack-bootstrap-ui-kit.git
synced 2024-10-22 11:05:45 +02:00
142 lines
3.3 KiB
JavaScript
142 lines
3.3 KiB
JavaScript
import $ from 'jquery';
|
|
import Events from '../_events';
|
|
|
|
import FormBasics from './_ui.form.basics';
|
|
import FormValidateField from './_ui.form.validate.field';
|
|
import SpinnerUI from './_ui.spinner';
|
|
|
|
const FormValidate = (($) => {
|
|
// Constants
|
|
const NAME = 'jsFormValidate';
|
|
const DATA_KEY = NAME;
|
|
const $Html = $('html, body');
|
|
|
|
class FormValidate {
|
|
constructor(element) {
|
|
const ui = this;
|
|
const $element = $(element);
|
|
const $fields = $element.find('input,textarea,select');
|
|
|
|
ui._element = element;
|
|
ui.$element = $element;
|
|
$element.data(DATA_KEY, this);
|
|
|
|
ui._fields = $fields;
|
|
ui._stepped_form = $element.data('jsSteppedForm');
|
|
|
|
// prevent browsers checks (will do it using JS)
|
|
$element.attr('novalidate', 'novalidate');
|
|
|
|
$element.on(Events.FORM_INIT_STEPPED, () => {
|
|
ui._stepped_form = $element.data('jsSteppedForm');
|
|
});
|
|
|
|
// init fields validation
|
|
$fields.each((i, el) => {
|
|
// skip some fields here
|
|
if ($(el).attr('role') === 'combobox') {
|
|
return;
|
|
}
|
|
|
|
new FormValidateField(el);
|
|
});
|
|
|
|
// check form
|
|
$element.on('submit', (e) => {
|
|
ui.validate(true, () => {
|
|
e.preventDefault();
|
|
|
|
// switch to step
|
|
if (ui._stepped_form) {
|
|
const $el = $element.find('.error').first();
|
|
|
|
if ($el.length) {
|
|
ui._stepped_form.step($el.parents('.step'));
|
|
}
|
|
}
|
|
|
|
$element.trigger(Events.FORM_VALIDATION_FAILED);
|
|
});
|
|
});
|
|
|
|
$element.addClass(`${NAME}-active`);
|
|
$element.trigger(Events.FORM_INIT_VALIDATE);
|
|
}
|
|
|
|
// Public methods
|
|
dispose() {
|
|
const $element = $(this._element);
|
|
|
|
$element.removeClass(`${NAME}-active`);
|
|
$.removeData(this._element, DATA_KEY);
|
|
this._element = null;
|
|
}
|
|
|
|
validate(scrollTo = true, badCallback = false) {
|
|
console.log(`${NAME}: checking the form ...`);
|
|
|
|
const ui = this;
|
|
let valid = true;
|
|
|
|
ui._fields.filter(':visible').each((i, el) => {
|
|
const $el = $(el);
|
|
const fieldUI = $el.data('jsFormValidateField');
|
|
|
|
if (fieldUI && !fieldUI.validate()) {
|
|
SpinnerUI.hide();
|
|
|
|
ui.$element.addClass('error');
|
|
|
|
if (badCallback) {
|
|
badCallback();
|
|
}
|
|
|
|
valid = false;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
return valid;
|
|
}
|
|
|
|
static _jQueryInterface() {
|
|
return this.each(function () {
|
|
// attach functionality to element
|
|
const $element = $(this);
|
|
let data = $element.data(DATA_KEY);
|
|
|
|
if (!data) {
|
|
data = new FormValidate(this);
|
|
$element.data(DATA_KEY, data);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// jQuery interface
|
|
$.fn[NAME] = FormValidate._jQueryInterface;
|
|
$.fn[NAME].Constructor = FormValidate;
|
|
$.fn[NAME].noConflict = function () {
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
|
return FormValidate._jQueryInterface;
|
|
};
|
|
|
|
// auto-apply
|
|
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
|
$('form').each((i, el) => {
|
|
const $el = $(el);
|
|
|
|
// skip some forms
|
|
if ($el.hasClass('no-validation')) {
|
|
return true;
|
|
}
|
|
|
|
$el.jsFormValidate();
|
|
});
|
|
});
|
|
|
|
return FormValidate;
|
|
})($);
|
|
|
|
export default FormValidate;
|