webpack-bootstrap-ui-kit/src/js_old/_components/_ui.form.validate.js

142 lines
3.3 KiB
JavaScript
Raw Normal View History

2021-08-18 20:51:15 +02:00
import $ from "jquery";
import Events from "../_events";
2020-05-13 18:05:34 +02:00
2021-08-18 20:51:15 +02:00
import FormBasics from "./_ui.form.basics";
import FormValidateField from "./_ui.form.validate.field";
import SpinnerUI from "./_ui.spinner";
2019-06-08 17:20:51 +02:00
const FormValidate = (($) => {
// Constants
2021-08-18 20:51:15 +02:00
const NAME = "jsFormValidate";
2019-06-08 17:20:51 +02:00
const DATA_KEY = NAME;
2021-08-18 20:51:15 +02:00
const $Html = $("html, body");
2019-06-08 17:20:51 +02:00
class FormValidate {
constructor(element) {
const ui = this;
const $element = $(element);
2021-08-18 20:51:15 +02:00
const $fields = $element.find("input,textarea,select");
2019-06-08 17:20:51 +02:00
ui._element = element;
2020-05-13 18:05:34 +02:00
ui.$element = $element;
2019-06-08 17:20:51 +02:00
$element.data(DATA_KEY, this);
ui._fields = $fields;
2021-08-18 20:51:15 +02:00
ui._stepped_form = $element.data("jsSteppedForm");
2019-06-08 17:20:51 +02:00
// prevent browsers checks (will do it using JS)
2021-08-18 20:51:15 +02:00
$element.attr("novalidate", "novalidate");
2019-06-08 17:20:51 +02:00
$element.on(Events.FORM_INIT_STEPPED, () => {
2021-08-18 20:51:15 +02:00
ui._stepped_form = $element.data("jsSteppedForm");
2019-06-08 17:20:51 +02:00
});
// init fields validation
$fields.each((i, el) => {
2019-07-10 20:59:57 +02:00
// skip some fields here
2021-08-18 20:51:15 +02:00
if ($(el).attr("role") === "combobox") {
2019-07-10 20:59:57 +02:00
return;
}
2019-06-08 17:20:51 +02:00
new FormValidateField(el);
});
// check form
2021-08-18 20:51:15 +02:00
$element.on("submit", (e) => {
2019-06-08 17:20:51 +02:00
ui.validate(true, () => {
e.preventDefault();
// switch to step
if (ui._stepped_form) {
2021-08-18 20:51:15 +02:00
const $el = $element.find(".error").first();
2019-06-08 17:20:51 +02:00
if ($el.length) {
2021-08-18 20:51:15 +02:00
ui._stepped_form.step($el.parents(".step"));
2019-06-08 17:20:51 +02:00
}
}
$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) {
2020-09-09 17:40:58 +02:00
console.log(`${NAME}: checking the form ...`);
2019-06-08 17:20:51 +02:00
const ui = this;
let valid = true;
2021-08-18 20:51:15 +02:00
ui._fields.filter(":visible").each((i, el) => {
2019-06-08 17:20:51 +02:00
const $el = $(el);
2021-08-18 20:51:15 +02:00
const fieldUI = $el.data("jsFormValidateField");
2019-06-08 17:20:51 +02:00
if (fieldUI && !fieldUI.validate()) {
2020-05-13 18:05:34 +02:00
SpinnerUI.hide();
2019-06-08 17:20:51 +02:00
2021-08-18 20:51:15 +02:00
ui.$element.addClass("error");
2019-06-08 17:20:51 +02:00
2020-05-13 18:05:34 +02:00
if (badCallback) {
badCallback();
}
2019-06-08 17:20:51 +02:00
valid = false;
return false;
}
});
return valid;
}
static _jQueryInterface() {
2020-09-02 00:12:38 +02:00
return this.each(function () {
2019-06-08 17:20:51 +02:00
// 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;
2020-09-02 00:12:38 +02:00
$.fn[NAME].noConflict = function () {
2019-06-08 17:20:51 +02:00
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormValidate._jQueryInterface;
};
// auto-apply
2020-09-09 17:40:58 +02:00
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
2021-08-18 20:51:15 +02:00
$("form").each((i, el) => {
2019-06-08 17:20:51 +02:00
const $el = $(el);
// skip some forms
2021-08-18 20:51:15 +02:00
if ($el.hasClass("no-validation")) {
2019-06-08 17:20:51 +02:00
return true;
}
$el.jsFormValidate();
});
});
return FormValidate;
})($);
export default FormValidate;