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

142 lines
3.2 KiB
JavaScript
Raw Normal View History

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