@windwalker-io/unicorn-next 0.1.4 → 0.1.6

package/src/module/validation.ts

@@ -1,1026 +1,1046 @@
-import { useUniDirective } from '../composable';
-import { getBoundedInstance, html, selectAll, selectOne, trans, useUITheme } from '../service';
-import { Nullable } from '../types';
-import { mergeDeep } from '../utilities';
-import * as punycode from 'punycode';
-
-export declare type ValidationHandler = (value: any, input: HTMLElement, options?: Record<string, any>, fv?: UnicornFieldValidation) => any;
-
-export declare type Validator = {
-  handler: ValidationHandler,
-  options?: Record<string, any>;
-};
-
-const validatorHandlers: Record<string, ValidationHandler> = {};
-
-type InputElements = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-
-export interface FormValidationOptions {
-  scroll: boolean;
-  validatedClass: null;
-  fieldSelector: null;
-  scrollOffset: number;
-  enabled: boolean;
-}
-
-export interface FieldValidationOptions {
-  validClass: string;
-  errorSelector: string;
-  inputOptions: boolean;
-  inputOptionsSelector: string;
-  formSelector: string;
-  selector: string;
-  inputOptionsWrapperSelector: string;
-  events: string[];
-  invalidClass: string;
-  errorMessageClass: string;
-}
-
-const defaultOptions: FormValidationOptions = {
-  scroll: false,
-  scrollOffset: -100,
-  enabled: true,
-  fieldSelector: null,
-  validatedClass: null,
-};
-
-const defaultFieldOptions: FieldValidationOptions = {
-  formSelector: '[uni-form-validate]',
-  errorSelector: '[data-field-error]',
-  selector: 'input[data-field-input], select[data-field-input], textarea[data-field-input]',
-  validClass: 'is-valid',
-  invalidClass: 'is-invalid',
-  events: ['change'],
-  errorMessageClass: 'invalid-tooltip',
-  inputOptions: false,
-  inputOptionsWrapperSelector: 'div[data-field-input]',
-  inputOptionsSelector: '[data-input-option]'
-};
-
-export class UnicornFormValidation {
-  presetFields: HTMLElement[] = [];
-
-  static globalValidators: Record<string, Validator> = {};
-
-  validators: Record<string, Validator> = {};
-  options: FormValidationOptions;
-  $form: HTMLElement;
-
-  static is = 'uni-form-validate';
-
-  constructor(el: HTMLElement, options: Partial<FormValidationOptions> = {}) {
-    this.$form = selectOne(el);
-    this.options = this.mergeOptions(options);
-
-    this.registerDefaultValidators();
-
-    this.init();
-  }
-
-  mergeOptions(options: Partial<FormValidationOptions>) {
-    // Fix PHP empty array to JSON issue.
-    if (Array.isArray(options)) {
-      options = {};
-    }
-
-    return this.options = mergeDeep({}, defaultOptions, options);
-  }
-
-  get scrollEnabled() {
-    return this.options.scroll;
-  }
-
-  get scrollOffset() {
-    return Number(this.options.scrollOffset || -100);
-  }
-
-  get fieldSelector() {
-    return this.options.fieldSelector || 'input, select, textarea';
-  }
-
-  get validatedClass() {
-    return this.options.validatedClass || 'was-validated';
-  }
-
-  init() {
-    if (this.$form.tagName === 'FORM') {
-      this.$form.setAttribute('novalidate', 'true');
-      this.$form.addEventListener('submit', (event) => {
-        if (this.options.enabled && !this.validateAll()) {
-          event.stopImmediatePropagation(); // Stop following events
-          event.stopPropagation();
-          event.preventDefault();
-
-          this.$form.dispatchEvent(new CustomEvent('invalid'));
-
-          return false;
-        }
-
-        return true;
-      }, false);
-    }
-
-    this.prepareFields(this.findDOMFields());
-    this.prepareFields(this.presetFields);
-  }
-
-  findDOMFields(): HTMLElement[] {
-    return selectAll(this.$form.querySelectorAll<HTMLElement>(this.fieldSelector));
-  }
-
-  prepareFields(inputs: HTMLElement[]): Promise<void> {
-    inputs.forEach((input) => {
-      this.prepareFieldWrapper(input);
-    });
-
-    // Wait next tick
-    return Promise.resolve();
-  }
-
-  prepareFieldWrapper(input: HTMLElement): HTMLElement | null {
-    if (['INPUT', 'SELECT', 'TEXTAREA'].indexOf(input.tagName) !== -1) {
-      let wrapper: HTMLElement | null = input.closest('[uni-field-validate]');
-
-      if (!wrapper) {
-        wrapper = input.closest('[data-input-container]') || input.parentElement;
-
-        wrapper?.setAttribute('uni-field-validate', '{}');
-      }
-
-      return wrapper;
-    }
-
-    return input;
-  }
-
-  findFields(containsPresets: boolean = true): HTMLElement[] {
-    let inputs = this.findDOMFields();
-
-    if (containsPresets) {
-      inputs.push(...this.presetFields);
-    }
-
-    return inputs.map((input) => this.prepareFieldWrapper(input))
-      .filter(input => input != null) as HTMLElement[];
-  }
-
-  getFieldComponent(input: HTMLElement): UnicornFieldValidation | null {
-    let v = getBoundedInstance(input, 'field.validation');
-
-    if (!v) {
-      const wrapper = input.closest('[uni-field-validate]') as HTMLElement | null;
-
-      if (wrapper) {
-        v = getBoundedInstance(wrapper, 'field.validation');
-      }
-    }
-
-    return v;
-  }
-
-  validateAll(fields?: Nullable<HTMLElement[]>): boolean {
-    this.markFormAsUnvalidated();
-
-    fields = fields || this.findFields();
-    let firstFail: HTMLElement | null = null;
-
-    for (const field of fields) {
-      const fv = this.getFieldComponent(field);
-
-      if (!fv) {
-        continue;
-      }
-
-      const result = fv.checkValidity();
-
-      if (!result && !firstFail) {
-        firstFail = field;
-      }
-    }
-
-    this.markFormAsValidated();
-
-    if (firstFail && this.scrollEnabled) {
-      this.scrollTo(firstFail);
-    }
-
-    return firstFail === null;
-  }
-
-  async validateAllAsync(fields?: Nullable<HTMLElement[]>): Promise<boolean> {
-    this.markFormAsUnvalidated();
-
-    fields = fields || this.findFields();
-    let firstFail: HTMLElement | null = null;
-    const promises: Promise<boolean>[] = [];
-
-    for (const field of fields) {
-      const fv = this.getFieldComponent(field);
-
-      if (!fv) {
-        continue;
-      }
-
-      promises.push(
-        fv.checkValidityAsync().then((result) => {
-          if (!result && !firstFail) {
-            firstFail = field;
-          }
-
-          return result;
-        })
-      );
-    }
-
-    await Promise.all(promises);
-
-    this.markFormAsValidated();
-
-    if (firstFail && this.scrollEnabled) {
-      this.scrollTo(firstFail);
-    }
-
-    return firstFail === null;
-  }
-
-  scrollTo(element: HTMLElement): void {
-    const offset = this.scrollOffset;
-    const elementPosition = element.getBoundingClientRect().top;
-    const offsetPosition = elementPosition + window.scrollY + offset;
-
-    window.scrollTo({
-      top: offsetPosition,
-      behavior: 'smooth'
-    });
-  }
-
-  markFormAsValidated(): void {
-    if (!this.$form) {
-      return;
-    }
-
-    this.$form.classList.add(this.validatedClass);
-  }
-
-  markFormAsUnvalidated(): void {
-    if (!this.$form) {
-      return;
-    }
-
-    this.$form.classList.remove(this.validatedClass);
-  }
-
-  addField(field: HTMLElement): this {
-    this.presetFields.push(field);
-
-    this.prepareFieldWrapper(field);
-
-    return this;
-  }
-
-  registerDefaultValidators(): void {
-    for (let name in validatorHandlers) {
-      this.addValidator(name, validatorHandlers[name]);
-    }
-  }
-
-  /**
-   * Add validator handler.
-   */
-  addValidator(name: string, handler: ValidationHandler, options: Record<string, any> = {}) {
-    options = options || {};
-
-    this.validators[name] = {
-      handler,
-      options
-    };
-
-    return this;
-  }
-
-  /**
-   * Add validator handler.
-   */
-  static addGlobalValidator(name: string, handler: ValidationHandler, options: Record<string, any> = {}) {
-    options = options || {};
-
-    this.globalValidators[name] = {
-      handler,
-      options
-    };
-
-    return this;
-  }
-}
-
-export class UnicornFieldValidation {
-  $input: InputElements | undefined;
-  options: FieldValidationOptions;
-
-  static is = 'uni-field-validate';
-
-  constructor(protected el: HTMLElement, options: Partial<FieldValidationOptions> = {}) {
-    this.options = this.mergeOptions(options);
-
-    this.$input = this.selectInput();
-
-    this.init();
-  }
-
-  mergeOptions(options: Partial<FieldValidationOptions>) {
-    // Fix PHP empty array to JSON issue.
-    if (Array.isArray(options)) {
-      options = {};
-    }
-
-    return this.options = mergeDeep({}, defaultFieldOptions, options);
-  }
-
-  get $form(): HTMLFormElement {
-    return this.getForm();
-  }
-
-  get errorSelector(): string {
-    return this.options.errorSelector;
-  }
-
-  get selector(): string {
-    return this.options.selector;
-  }
-
-  get validClass(): string {
-    return this.options.validClass;
-  }
-
-  get invalidClass(): string {
-    return this.options.invalidClass;
-  }
-
-  get isVisible(): boolean {
-    return !!(this.el.offsetWidth || this.el.offsetHeight || this.el.getClientRects().length);
-  }
-
-  get isInputOptions(): boolean {
-    return Boolean(this.options.inputOptions);
-  }
-
-  get validationMessage(): string {
-    return this.$input?.validationMessage || '';
-  }
-
-  get validity(): ValidityState | undefined {
-    return this.$input?.validity;
-  }
-
-  selectInput(): InputElements | undefined {
-    let selector = this.selector;
-
-    if (this.options.inputOptions) {
-      selector += ', ' + this.options.inputOptionsWrapperSelector;
-    }
-
-    let input = this.el.querySelector<InputElements>(selector);
-
-    if (!input) {
-      input = this.el.querySelector<InputElements>('input, select, textarea');
-    }
-
-    if (!input) {
-      return undefined;
-    }
-
-    return this.$input = input;
-  }
-
-  init() {
-    this.selectInput();
-
-    this.bindEvents();
-
-    this.prepareWrapper();
-
-    if (this.isInputOptions) {
-      const $input = this.$input as any;
-
-      if (
-        !($input instanceof HTMLInputElement)
-        && !($input instanceof HTMLSelectElement)
-        && !($input instanceof HTMLTextAreaElement)
-      ) {
-        $input.validationMessage = '';
-
-        $input.setCustomValidity = (msg: string) => {
-          $input.validationMessage = String(msg);
-        };
-
-        $input.checkValidity = () => {
-          return this.checkInputOptionsValidity();
-        };
-      }
-    }
-  }
-
-  bindEvents() {
-    if (!this.$input) {
-      return;
-    }
-
-    this.$input.addEventListener('invalid', (e) => {
-      this.showInvalidResponse();
-    });
-
-    const events = this.options.events;
-
-    events.forEach((eventName) => {
-      this.$input?.addEventListener(eventName, () => {
-        this.checkValidity();
-      });
-    });
-  }
-
-  prepareWrapper() {
-    if (this.el.querySelector(this.errorSelector)?.classList?.contains('invalid-tooltip')) {
-      if (window.getComputedStyle(this.el).position === 'static') {
-        this.el.style.position = 'relative';
-      }
-    }
-  }
-
-  checkValidity() {
-    if (!this.$input) {
-      return true;
-    }
-
-    if (this.$input.hasAttribute('readonly')) {
-      return true;
-    }
-
-    if (this.$input.hasAttribute('[data-novalidate]')) {
-      return true;
-    }
-
-    if (this.$input.closest('[data-novalidate]')) {
-      return true;
-    }
-
-    this.$input.setCustomValidity('');
-    let valid = this.$input.checkValidity();
-
-    if (valid && this.$form) {
-      valid = this.runCustomValidity();
-    }
-
-    // Raise invalid event
-    // this.$input.checkValidity();
-
-    this.updateValidClass(valid);
-
-    return valid;
-  }
-
-  runCustomValidity() {
-    if (!this.$input) {
-      return true;
-    }
-
-    // Check custom validity
-    const validates = (this.$input.getAttribute('data-validate') || '').split('|');
-    let result = true;
-
-    if (this.$input.value !== '' && validates.length) {
-      if (!this.checkCustomDataAttributeValidity()) {
-        return false;
-      }
-
-      for (const validatorName of validates) {
-        const [validator, options] = this.getValidator(validatorName) || [null, {}];
-
-        if (!validator) {
-          continue;
-        }
-
-        Object.assign(options, validator.options);
-
-        let r = validator.handler(this.$input.value, this.$input, options, this);
-
-        // If return is a promise, push to stack and resolve later
-        if (r instanceof Promise || (typeof r === 'object' && r.then)) {
-          r.then((result: boolean) => {
-            this.handleAsyncCustomResult(result, validator);
-          });
-          continue;
-        }
-
-        if (!this.handleCustomResult(r, validator)) {
-          result = false;
-
-          break;
-        }
-      }
-    }
-
-    return result;
-  }
-
-  async checkValidityAsync() {
-    if (!this.$input) {
-      return true;
-    }
-
-    if (this.$input.hasAttribute('readonly')) {
-      return true;
-    }
-
-    this.$input.setCustomValidity('');
-    let valid = this.$input.checkValidity();
-
-    if (valid && this.$form) {
-      valid = await this.runCustomValidityAsync();
-    }
-
-    this.updateValidClass(valid);
-
-    return valid;
-  }
-
-  async runCustomValidityAsync(): Promise<boolean> {
-    if (!this.$input) {
-      return true;
-    }
-
-    // Check custom validity
-    const validates = (this.$input.getAttribute('data-validate') || '').split('|');
-
-    const results: Array<boolean | string | undefined> = [];
-    const promises: Promise<boolean>[] = [];
-
-    if (this.$input.value !== '' && validates.length) {
-      if (!this.checkCustomDataAttributeValidity()) {
-        return false;
-      }
-
-      for (const validatorName of validates) {
-        let [validator, options] = this.getValidator(validatorName) || [null, {}];
-
-        if (!validator) {
-          continue;
-        }
-
-        options = Object.assign({}, options, validator.options || {});
-
-        promises.push(
-          Promise.resolve(validator.handler(this.$input.value, this.$input, options, this))
-            .then((r) => {
-              results.push(this.handleAsyncCustomResult(r, validator));
-
-              return r;
-            })
-        );
-      }
-    }
-
-    await Promise.all(promises);
-
-    for (const result of results) {
-      if (result === false) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  checkCustomDataAttributeValidity(): boolean {
-    const error = this.$input?.dataset.validationFail;
-
-    return this.handleCustomResult(error);
-  }
-
-  checkInputOptionsValidity(): boolean {
-    if (!this.$input) {
-      return true;
-    }
-
-    const isRequired = this.$input.getAttribute('required') != null;
-    const optionWrappers = this.$input.querySelectorAll(this.options.inputOptionsSelector);
-    let result = true;
-
-    if (isRequired) {
-      for (const optionWrapper of optionWrappers) {
-        const input = optionWrapper.querySelector('input');
-
-        result = false;
-
-        // Only need one checked
-        if (input?.checked) {
-          result = true;
-          break;
-        }
-      }
-    }
-
-    // Get browser input validation message
-    const n = document.createElement('input');
-    n.required = isRequired;
-
-    if (result) {
-      n.value = 'placeholder';
-    }
-
-    n.checkValidity();
-
-    (this.$input as any).validationMessage = n.validationMessage;
-    (this.$input as any).validity = n.validity;
-
-    for (const optionWrapper of optionWrappers) {
-      const input = optionWrapper.querySelector<HTMLInputElement>('input');
-
-      input?.setCustomValidity(n.validationMessage);
-    }
-
-    if (!result) {
-      this.$input.dispatchEvent(
-        new CustomEvent('invalid')
-      );
-    }
-
-    return result;
-  }
-
-  /**
-   * @param valid {boolean}
-   */
-  updateValidClass(valid: Boolean) {
-    const $errorElement = this.getErrorElement();
-    const $invalidTarget = $errorElement?.previousElementSibling;
-
-    this.$input?.classList.remove(this.invalidClass);
-    this.$input?.classList.remove(this.validClass);
-    this.el.classList.remove(this.invalidClass);
-    this.el.classList.remove(this.validClass);
-    $invalidTarget?.classList.remove(this.invalidClass);
-    $invalidTarget?.classList.remove(this.validClass);
-
-    if (valid) {
-      this.$input?.classList.add(this.validClass);
-      this.el.classList.add(this.validClass);
-
-      $invalidTarget?.classList.add(this.validClass);
-    } else {
-      this.$input?.classList.add(this.invalidClass);
-      this.el.classList.add(this.invalidClass);
-
-      $invalidTarget?.classList.add(this.invalidClass);
-    }
-  }
-
-  getFormValidation(element?: Nullable<HTMLFormElement>): UnicornFormValidation | null {
-    return getBoundedInstance(element || this.getForm(), 'form.validation')!;
-  }
-
-  getValidator(name: string): [Validator, Record<string, any>] | null {
-    const matches = name.match(/(?<type>[\w\-_]+)(\((?<params>.*)\))*/);
-
-    if (!matches) {
-      return null;
-    }
-
-    const validatorName = matches.groups?.type || '';
-
-    const params = matches.groups?.params || '';
-
-    const fv = this.getFormValidation(this.$form!);
-    const validator = fv?.validators[validatorName] || UnicornFormValidation.globalValidators[validatorName];
-
-    if (!validator) {
-      return null;
-    }
-
-    const paramMatches = params.matchAll(/(?<key>\w+)(\s?[=:]\s?(?<value>\w+))?/g);
-    const options: Record<string, string> = {};
-
-    for (const paramMatch of paramMatches) {
-      const match = paramMatch?.groups as {
-        key: string;
-        value: string;
-      } | undefined;
-
-      if (!match) {
-        continue;
-      }
-
-      options[match.key] = handleParamValue(match.value);
-    }
-
-    return [ validator, options ];
-  }
-
-  handleCustomResult(result: boolean | string | undefined, validator?: Nullable<Validator>): boolean {
-    if (typeof result === 'string') {
-      this.$input?.setCustomValidity(result);
-      result = result === '';
-    } else if (result === undefined) {
-      result = true;
-    }
-
-    if (result) {
-      this.$input?.setCustomValidity('');
-    } else if (validator) {
-      this.raiseCustomErrorState(validator);
-    }
-
-    return result;
-  }
-
-  handleAsyncCustomResult(result: boolean, validator?: Nullable<Validator>): boolean {
-    result = this.handleCustomResult(result, validator);
-
-    // Fire invalid events
-    this.$input?.checkValidity();
-
-    this.updateValidClass(result);
-
-    return result;
-  }
-
-  raiseCustomErrorState(validator: Validator): void {
-    let help;
-
-    if (this.$input?.validationMessage === '') {
-      help = validator.options?.notice;
-
-      if (typeof help === 'function') {
-        help = help(this.$input, this);
-      }
-
-      if (help != null) {
-        this.$input?.setCustomValidity(help);
-      }
-    }
-
-    if (this.$input?.validationMessage === '') {
-      this.$input?.setCustomValidity(trans('unicorn.message.validation.custom.error'));
-    }
-
-    this.$input?.dispatchEvent(
-      new CustomEvent('invalid')
-    );
-  }
-
-  setAsInvalidAndReport(error: string) {
-    this.setCustomValidity(error);
-    this.showInvalidResponse();
-  }
-
-  setCustomValidity(error: string) {
-    this.$input?.setCustomValidity(error);
-  }
-
-  reportValidity() {
-    if (this.validationMessage !== '') {
-      this.showInvalidResponse();
-    }
-  }
-
-  showInvalidResponse() {
-    /** @type ValidityState */
-    const state = this.$input?.validity;
-    let message: string = this.$input?.validationMessage || '';
-
-    for (let key in state) {
-      if (state[(key as keyof ValidityState)] && this.$input?.dataset[key + 'Message']) {
-        message = this.$input?.dataset[key + 'Message'] || '';
-        break;
-      }
-    }
-
-    if (!this.isVisible) {
-      let title = this.findLabel()?.textContent;
-
-      if (!title) {
-        title = this.$input?.name || '';
-      }
-
-      useUITheme().renderMessage(
-        `Field: ${title} - ${message}`,
-        'warning'
-      );
-    }
-
-    let $help = this.getErrorElement();
-
-    if (!$help) {
-      $help = this.createHelpElement()!;
-      this.el.appendChild($help);
-      this.prepareWrapper();
-    }
-
-    $help.textContent = message;
-
-    this.updateValidClass(false);
-  }
-
-  getErrorElement() {
-    return this.el.querySelector(this.errorSelector);
-  }
-
-  createHelpElement() {
-    const className = this.options.errorMessageClass;
-    const parsed = this.parseSelector(this.errorSelector || '');
-
-    const $help = html(`<div class="${className}"></div>`)!;
-
-    $help.classList.add(...parsed.classes);
-
-    parsed.attrs.forEach((attr) => {
-      $help.setAttribute(attr[0], attr[1] || '');
-    });
-
-    parsed.ids.forEach((id) => {
-      $help.id = id;
-    });
-
-    return $help;
-  }
-
-  /**
-   * @see https://stackoverflow.com/a/17888178
-   */
-  parseSelector(subselector: string): { tags: string[]; classes: string[]; ids: string[]; attrs: string[][] } {
-    const obj: {
-      tags: string[];
-      classes: string[];
-      ids: string[];
-      attrs: string[][];
-    } = { tags: [], classes: [], ids: [], attrs: [] };
-    for (const token of subselector.split(/(?=\.)|(?=#)|(?=\[)/)) {
-      switch (token[0]) {
-        case '#':
-          obj.ids.push(token.slice(1));
-          break;
-        case '.':
-          obj.classes.push(token.slice(1));
-          break;
-        case '[':
-          obj.attrs.push(token.slice(1, -1).split('='));
-          break;
-        default :
-          obj.tags.push(token);
-          break;
-      }
-    }
-    return obj;
-  }
-
-  setAsValidAndClearResponse() {
-    this.setCustomValidity('');
-    this.updateValidClass(true);
-    this.clearInvalidResponse();
-  }
-
-  clearInvalidResponse() {
-    const $help = this.el.querySelector(this.errorSelector)!;
-
-    $help.textContent = '';
-  }
-
-  getForm() {
-    return this.el.closest(this.options.formSelector || '[uni-form-validate]') as HTMLFormElement;
-  }
-
-  findLabel() {
-    const id = this.$input?.id || '';
-
-    const wrapper = this.$input?.closest('[data-field-wrapper]');
-    let label = null;
-
-    if (wrapper) {
-      label = wrapper.querySelector('[data-field-label]');
-    }
-
-    if (!label) {
-      label = document.querySelector(`label[for="${id}"]`);
-    }
-
-    return label;
-  }
-}
-
-function camelTo(str: string, sep: string) {
-  return str.replace(/([a-z])([A-Z])/g, `$1${sep}$2`).toLowerCase();
-}
-
-validatorHandlers.username = function (value: any, element: HTMLElement) {
-  const regex = new RegExp('[\<|\>|"|\'|\%|\;|\(|\)|\&]', 'i');
-  return !regex.test(value);
-};
-
-validatorHandlers.numeric = function (value: any, element: HTMLElement) {
-  const regex = /^(\d|-)?(\d|,)*\.?\d*$/;
-  return regex.test(value);
-};
-
-validatorHandlers.email = function (value: any, element: HTMLElement) {
-  value = punycode.toASCII(value);
-  const regex = /^[a-zA-Z0-9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-  return regex.test(value);
-};
-
-validatorHandlers.url = function (value: any, element: HTMLElement) {
-  const regex = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/[^\s]*)?$/i;
-  return regex.test(value);
-};
-
-validatorHandlers.alnum = function (value: any, element: HTMLElement) {
-  const regex = /^[a-zA-Z0-9]*$/;
-  return regex.test(value);
-};
-
-validatorHandlers.color = function (value: any, element: HTMLElement) {
-  const regex = /^#(?:[0-9a-f]{3}){1,2}$/;
-  return regex.test(value);
-};
-
-/**
- * @see  http://www.virtuosimedia.com/dev/php/37-tested-php-perl-and-javascript-regular-expressions
- */
-validatorHandlers.creditcard = function (value: any, element: HTMLElement) {
-  const regex = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6011[0-9]{12}|622((12[6-9]|1[3-9][0-9])|([2-8][0-9][0-9])|(9(([0-1][0-9])|(2[0-5]))))[0-9]{10}|64[4-9][0-9]{13}|65[0-9]{14}|3(?:0[0-5]|[68][0-9])[0-9]{11}|3[47][0-9]{13})*$/;
-  return regex.test(value);
-};
-
-validatorHandlers.ip = function (value: any, element: HTMLElement) {
-  const regex = /^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$/;
-  return regex.test(value);
-};
-
-validatorHandlers['password-confirm'] = function (value: any, element: HTMLElement) {
-  const selector = element.dataset.confirmTarget;
-
-  if (!selector) {
-    throw new Error('Validator: "password-confirm" must add "data-confirm-target" attribute.');
-  }
-
-  const target = document.querySelector<HTMLInputElement>(selector);
-
-  return target?.value === value;
-};
-
-export { validatorHandlers as validators };
-
-// customElements.define(UnicornFormValidateElement.is, UnicornFormValidateElement);
-// customElements.define(UnicornFieldValidateElement.is, UnicornFieldValidateElement);
-
-export const ready = Promise.all([
-  useUniDirective('form-validate', {
-    mounted(el, binding) {
-      getBoundedInstance(el, 'form.validation', (ele) => {
-        return new UnicornFormValidation(ele as HTMLElement, JSON.parse(binding.value || '{}'));
-      });
-    },
-    updated(el, binding) {
-      const instance = getBoundedInstance<UnicornFormValidation>(el, 'form.validation');
-      instance.mergeOptions(JSON.parse(binding.value || '{}'));
-    }
-  }),
-
-  useUniDirective('field-validate', {
-    mounted(el, binding) {
-      getBoundedInstance<UnicornFieldValidation>(el, 'field.validation', (ele) => {
-        return new UnicornFieldValidation(ele as HTMLElement, JSON.parse(binding.value || '{}'));
-      });
-    },
-
-    updated(el, binding) {
-      const instance = getBoundedInstance<UnicornFieldValidation>(el, 'field.validation');
-      instance.mergeOptions(JSON.parse(binding.value || '{}') || {});
-    }
-  })
-]);
-
-function handleParamValue(value: any) {
-  if (!isNaN(Number(value))) {
-    return Number(value);
-  }
-
-  if (value === 'null') {
-    return null;
-  }
-
-  if (value === 'true') {
-    return true;
-  }
-
-  if (value === 'false') {
-    return true;
-  }
-
-  return value;
-}
-
-export interface ValidationModule {
-  UnicornFormValidation: typeof UnicornFormValidation;
-  UnicornFieldValidation: typeof UnicornFieldValidation;
-  ready: Promise<any>;
-  validators: typeof validatorHandlers;
-}
+import * as punycode from 'punycode';
+import { useUniDirective } from '../composable';
+import { getBoundedInstance, html, selectAll, selectOne, trans, useUITheme } from '../service';
+import { Nullable } from '../types';
+import { mergeDeep } from '../utilities';
+
+export declare type ValidationHandler<V = any, E = HTMLElement, P = Record<string, any>> = (
+  value: V,
+  input: E,
+  options?: ValidatorOptions<E, P>,
+  fv?: UnicornFieldValidation
+) => any;
+
+export declare type ValidatorNoticeFunction<E = HTMLElement> = (input: E, field: UnicornFieldValidation) => any;
+
+export type ValidatorOptions<E = HTMLElement, P = Record<string, any>> = {
+  notice?: ValidatorNoticeFunction<E> | string;
+  [name: string]: any;
+} & Partial<P>;
+
+export declare type Validator<V = any, E = HTMLElement, P = Record<string, any>> = {
+  handler: ValidationHandler<V, E, P>,
+  options?: ValidatorOptions<E, P>;
+};
+
+const validatorHandlers: Record<string, ValidationHandler<any, any>> = {};
+
+type InputElements = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+export interface FormValidationOptions {
+  scroll: boolean;
+  validatedClass: null;
+  fieldSelector: null;
+  scrollOffset: number;
+  enabled: boolean;
+}
+
+export interface FieldValidationOptions {
+  validClass: string;
+  errorSelector: string;
+  inputOptions: boolean;
+  inputOptionsSelector: string;
+  formSelector: string;
+  selector: string;
+  inputOptionsWrapperSelector: string;
+  events: string[];
+  invalidClass: string;
+  errorMessageClass: string;
+}
+
+const defaultOptions: FormValidationOptions = {
+  scroll: false,
+  scrollOffset: -100,
+  enabled: true,
+  fieldSelector: null,
+  validatedClass: null,
+};
+
+const defaultFieldOptions: FieldValidationOptions = {
+  formSelector: '[uni-form-validate]',
+  errorSelector: '[data-field-error]',
+  selector: 'input[data-field-input], select[data-field-input], textarea[data-field-input]',
+  validClass: 'is-valid',
+  invalidClass: 'is-invalid',
+  events: ['change'],
+  errorMessageClass: 'invalid-tooltip',
+  inputOptions: false,
+  inputOptionsWrapperSelector: 'div[data-field-input]',
+  inputOptionsSelector: '[data-input-option]'
+};
+
+export class UnicornFormValidation {
+  presetFields: HTMLElement[] = [];
+
+  static globalValidators: Record<string, Validator<any, any, any>> = {};
+
+  validators: Record<string, Validator<any, any, any>> = {};
+  options: FormValidationOptions;
+  $form: HTMLElement;
+
+  static is = 'uni-form-validate';
+
+  constructor(el: HTMLElement, options: Partial<FormValidationOptions> = {}) {
+    this.$form = selectOne(el);
+    this.options = this.mergeOptions(options);
+
+    this.registerDefaultValidators();
+
+    this.init();
+  }
+
+  mergeOptions(options: Partial<FormValidationOptions>) {
+    // Fix PHP empty array to JSON issue.
+    if (Array.isArray(options)) {
+      options = {};
+    }
+
+    return this.options = mergeDeep({}, defaultOptions, options);
+  }
+
+  get scrollEnabled() {
+    return this.options.scroll;
+  }
+
+  get scrollOffset() {
+    return Number(this.options.scrollOffset || -100);
+  }
+
+  get fieldSelector() {
+    return this.options.fieldSelector || 'input, select, textarea';
+  }
+
+  get validatedClass() {
+    return this.options.validatedClass || 'was-validated';
+  }
+
+  init() {
+    if (this.$form.tagName === 'FORM') {
+      this.$form.setAttribute('novalidate', 'true');
+      this.$form.addEventListener('submit', (event) => {
+        if (this.options.enabled && !this.validateAll()) {
+          event.stopImmediatePropagation(); // Stop following events
+          event.stopPropagation();
+          event.preventDefault();
+
+          this.$form.dispatchEvent(new CustomEvent('invalid'));
+
+          return false;
+        }
+
+        return true;
+      }, false);
+    }
+
+    this.prepareFields(this.findDOMFields());
+    this.prepareFields(this.presetFields);
+  }
+
+  findDOMFields(): HTMLElement[] {
+    return selectAll(this.$form.querySelectorAll<HTMLElement>(this.fieldSelector));
+  }
+
+  prepareFields(inputs: HTMLElement[]): Promise<void> {
+    inputs.forEach((input) => {
+      this.prepareFieldWrapper(input);
+    });
+
+    // Wait next tick
+    return Promise.resolve();
+  }
+
+  prepareFieldWrapper(input: HTMLElement): HTMLElement | null {
+    if (['INPUT', 'SELECT', 'TEXTAREA'].indexOf(input.tagName) !== -1) {
+      let wrapper: HTMLElement | null = input.closest('[uni-field-validate]');
+
+      if (!wrapper) {
+        wrapper = input.closest('[data-input-container]') || input.parentElement;
+
+        wrapper?.setAttribute('uni-field-validate', '{}');
+      }
+
+      return wrapper;
+    }
+
+    return input;
+  }
+
+  findFields(containsPresets: boolean = true): HTMLElement[] {
+    let inputs = this.findDOMFields();
+
+    if (containsPresets) {
+      inputs.push(...this.presetFields);
+    }
+
+    return inputs.map((input) => this.prepareFieldWrapper(input))
+      .filter(input => input != null) as HTMLElement[];
+  }
+
+  getFieldComponent(input: HTMLElement): UnicornFieldValidation | null {
+    let v = getBoundedInstance(input, 'field.validation');
+
+    if (!v) {
+      const wrapper = input.closest('[uni-field-validate]') as HTMLElement | null;
+
+      if (wrapper) {
+        v = getBoundedInstance(wrapper, 'field.validation');
+      }
+    }
+
+    return v;
+  }
+
+  validateAll(fields?: Nullable<HTMLElement[]>): boolean {
+    this.markFormAsUnvalidated();
+
+    fields = fields || this.findFields();
+    let firstFail: HTMLElement | null = null;
+
+    for (const field of fields) {
+      const fv = this.getFieldComponent(field);
+
+      if (!fv) {
+        continue;
+      }
+
+      const result = fv.checkValidity();
+
+      if (!result && !firstFail) {
+        firstFail = field;
+      }
+    }
+
+    this.markFormAsValidated();
+
+    if (firstFail && this.scrollEnabled) {
+      this.scrollTo(firstFail);
+    }
+
+    return firstFail === null;
+  }
+
+  async validateAllAsync(fields?: Nullable<HTMLElement[]>): Promise<boolean> {
+    this.markFormAsUnvalidated();
+
+    fields = fields || this.findFields();
+    let firstFail: HTMLElement | null = null;
+    const promises: Promise<boolean>[] = [];
+
+    for (const field of fields) {
+      const fv = this.getFieldComponent(field);
+
+      if (!fv) {
+        continue;
+      }
+
+      promises.push(
+        fv.checkValidityAsync().then((result) => {
+          if (!result && !firstFail) {
+            firstFail = field;
+          }
+
+          return result;
+        })
+      );
+    }
+
+    await Promise.all(promises);
+
+    this.markFormAsValidated();
+
+    if (firstFail && this.scrollEnabled) {
+      this.scrollTo(firstFail);
+    }
+
+    return firstFail === null;
+  }
+
+  scrollTo(element: HTMLElement): void {
+    const offset = this.scrollOffset;
+    const elementPosition = element.getBoundingClientRect().top;
+    const offsetPosition = elementPosition + window.scrollY + offset;
+
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: 'smooth'
+    });
+  }
+
+  markFormAsValidated(): void {
+    if (!this.$form) {
+      return;
+    }
+
+    this.$form.classList.add(this.validatedClass);
+  }
+
+  markFormAsUnvalidated(): void {
+    if (!this.$form) {
+      return;
+    }
+
+    this.$form.classList.remove(this.validatedClass);
+  }
+
+  addField(field: HTMLElement): this {
+    this.presetFields.push(field);
+
+    this.prepareFieldWrapper(field);
+
+    return this;
+  }
+
+  registerDefaultValidators(): void {
+    for (let name in validatorHandlers) {
+      this.addValidator(name, validatorHandlers[name]);
+    }
+  }
+
+  /**
+   * Add validator handler.
+   */
+  addValidator<T extends any, E extends HTMLElement, P = Record<string, any>>(
+    name: string,
+    handler: ValidationHandler<T, E, P>,
+    options: ValidatorOptions<E, P> = {}
+  ) {
+    options = options || {};
+
+    this.validators[name] = {
+      handler,
+      options
+    };
+
+    return this;
+  }
+
+  /**
+   * Add validator handler.
+   */
+  static addGlobalValidator<T extends any, E extends HTMLElement, P = Record<string, any>>(
+    name: string,
+    handler: ValidationHandler<T, E, P>,
+    options: ValidatorOptions<E, P> = {}
+  ) {
+    options = options || {};
+
+    this.globalValidators[name] = {
+      handler,
+      options
+    };
+
+    return this;
+  }
+}
+
+export class UnicornFieldValidation {
+  $input: InputElements | undefined;
+  options: FieldValidationOptions;
+
+  static is = 'uni-field-validate';
+
+  constructor(protected el: HTMLElement, options: Partial<FieldValidationOptions> = {}) {
+    this.options = this.mergeOptions(options);
+
+    this.$input = this.selectInput();
+
+    this.init();
+  }
+
+  mergeOptions(options: Partial<FieldValidationOptions>) {
+    // Fix PHP empty array to JSON issue.
+    if (Array.isArray(options)) {
+      options = {};
+    }
+
+    return this.options = mergeDeep({}, defaultFieldOptions, options);
+  }
+
+  get $form(): HTMLFormElement {
+    return this.getForm();
+  }
+
+  get errorSelector(): string {
+    return this.options.errorSelector;
+  }
+
+  get selector(): string {
+    return this.options.selector;
+  }
+
+  get validClass(): string {
+    return this.options.validClass;
+  }
+
+  get invalidClass(): string {
+    return this.options.invalidClass;
+  }
+
+  get isVisible(): boolean {
+    return !!(this.el.offsetWidth || this.el.offsetHeight || this.el.getClientRects().length);
+  }
+
+  get isInputOptions(): boolean {
+    return Boolean(this.options.inputOptions);
+  }
+
+  get validationMessage(): string {
+    return this.$input?.validationMessage || '';
+  }
+
+  get validity(): ValidityState | undefined {
+    return this.$input?.validity;
+  }
+
+  selectInput(): InputElements | undefined {
+    let selector = this.selector;
+
+    if (this.options.inputOptions) {
+      selector += ', ' + this.options.inputOptionsWrapperSelector;
+    }
+
+    let input = this.el.querySelector<InputElements>(selector);
+
+    if (!input) {
+      input = this.el.querySelector<InputElements>('input, select, textarea');
+    }
+
+    if (!input) {
+      return undefined;
+    }
+
+    return this.$input = input;
+  }
+
+  init() {
+    this.selectInput();
+
+    this.bindEvents();
+
+    this.prepareWrapper();
+
+    if (this.isInputOptions) {
+      const $input = this.$input as any;
+
+      if (
+        !($input instanceof HTMLInputElement)
+        && !($input instanceof HTMLSelectElement)
+        && !($input instanceof HTMLTextAreaElement)
+      ) {
+        $input.validationMessage = '';
+
+        $input.setCustomValidity = (msg: string) => {
+          $input.validationMessage = String(msg);
+        };
+
+        $input.checkValidity = () => {
+          return this.checkInputOptionsValidity();
+        };
+      }
+    }
+  }
+
+  bindEvents() {
+    if (!this.$input) {
+      return;
+    }
+
+    this.$input.addEventListener('invalid', (e) => {
+      this.showInvalidResponse();
+    });
+
+    const events = this.options.events;
+
+    events.forEach((eventName) => {
+      this.$input?.addEventListener(eventName, () => {
+        this.checkValidity();
+      });
+    });
+  }
+
+  prepareWrapper() {
+    if (this.el.querySelector(this.errorSelector)?.classList?.contains('invalid-tooltip')) {
+      if (window.getComputedStyle(this.el).position === 'static') {
+        this.el.style.position = 'relative';
+      }
+    }
+  }
+
+  checkValidity() {
+    if (!this.$input) {
+      return true;
+    }
+
+    if (this.$input.hasAttribute('readonly')) {
+      return true;
+    }
+
+    if (this.$input.hasAttribute('[data-novalidate]')) {
+      return true;
+    }
+
+    if (this.$input.closest('[data-novalidate]')) {
+      return true;
+    }
+
+    this.$input.setCustomValidity('');
+    let valid = this.$input.checkValidity();
+
+    if (valid && this.$form) {
+      valid = this.runCustomValidity();
+    }
+
+    // Raise invalid event
+    // this.$input.checkValidity();
+
+    this.updateValidClass(valid);
+
+    return valid;
+  }
+
+  runCustomValidity() {
+    if (!this.$input) {
+      return true;
+    }
+
+    // Check custom validity
+    const validates = (this.$input.getAttribute('data-validate') || '').split('|');
+    let result = true;
+
+    if (this.$input.value !== '' && validates.length) {
+      if (!this.checkCustomDataAttributeValidity()) {
+        return false;
+      }
+
+      for (const validatorName of validates) {
+        const [validator, options] = this.getValidator(validatorName) || [null, {}];
+
+        if (!validator) {
+          continue;
+        }
+
+        Object.assign(options, validator.options);
+
+        let r = validator.handler(this.$input.value, this.$input, options, this);
+
+        // If return is a promise, push to stack and resolve later
+        if (r instanceof Promise || (typeof r === 'object' && r.then)) {
+          r.then((result: boolean) => {
+            this.handleAsyncCustomResult(result, validator);
+          });
+          continue;
+        }
+
+        if (!this.handleCustomResult(r, validator)) {
+          result = false;
+
+          break;
+        }
+      }
+    }
+
+    return result;
+  }
+
+  async checkValidityAsync() {
+    if (!this.$input) {
+      return true;
+    }
+
+    if (this.$input.hasAttribute('readonly')) {
+      return true;
+    }
+
+    this.$input.setCustomValidity('');
+    let valid = this.$input.checkValidity();
+
+    if (valid && this.$form) {
+      valid = await this.runCustomValidityAsync();
+    }
+
+    this.updateValidClass(valid);
+
+    return valid;
+  }
+
+  async runCustomValidityAsync(): Promise<boolean> {
+    if (!this.$input) {
+      return true;
+    }
+
+    // Check custom validity
+    const validates = (this.$input.getAttribute('data-validate') || '').split('|');
+
+    const results: Array<boolean | string | undefined> = [];
+    const promises: Promise<boolean>[] = [];
+
+    if (this.$input.value !== '' && validates.length) {
+      if (!this.checkCustomDataAttributeValidity()) {
+        return false;
+      }
+
+      for (const validatorName of validates) {
+        let [validator, options] = this.getValidator(validatorName) || [null, {}];
+
+        if (!validator) {
+          continue;
+        }
+
+        options = Object.assign({}, options, validator.options || {});
+
+        promises.push(
+          Promise.resolve(validator.handler(this.$input.value, this.$input, options, this))
+            .then((r) => {
+              results.push(this.handleAsyncCustomResult(r, validator));
+
+              return r;
+            })
+        );
+      }
+    }
+
+    await Promise.all(promises);
+
+    for (const result of results) {
+      if (result === false) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  checkCustomDataAttributeValidity(): boolean {
+    const error = this.$input?.dataset.validationFail;
+
+    return this.handleCustomResult(error);
+  }
+
+  checkInputOptionsValidity(): boolean {
+    if (!this.$input) {
+      return true;
+    }
+
+    const isRequired = this.$input.getAttribute('required') != null;
+    const optionWrappers = this.$input.querySelectorAll(this.options.inputOptionsSelector);
+    let result = true;
+
+    if (isRequired) {
+      for (const optionWrapper of optionWrappers) {
+        const input = optionWrapper.querySelector('input');
+
+        result = false;
+
+        // Only need one checked
+        if (input?.checked) {
+          result = true;
+          break;
+        }
+      }
+    }
+
+    // Get browser input validation message
+    const n = document.createElement('input');
+    n.required = isRequired;
+
+    if (result) {
+      n.value = 'placeholder';
+    }
+
+    n.checkValidity();
+
+    (this.$input as any).validationMessage = n.validationMessage;
+    (this.$input as any).validity = n.validity;
+
+    for (const optionWrapper of optionWrappers) {
+      const input = optionWrapper.querySelector<HTMLInputElement>('input');
+
+      input?.setCustomValidity(n.validationMessage);
+    }
+
+    if (!result) {
+      this.$input.dispatchEvent(
+        new CustomEvent('invalid')
+      );
+    }
+
+    return result;
+  }
+
+  /**
+   * @param valid {boolean}
+   */
+  updateValidClass(valid: Boolean) {
+    const $errorElement = this.getErrorElement();
+    const $invalidTarget = $errorElement?.previousElementSibling;
+
+    this.$input?.classList.remove(this.invalidClass);
+    this.$input?.classList.remove(this.validClass);
+    this.el.classList.remove(this.invalidClass);
+    this.el.classList.remove(this.validClass);
+    $invalidTarget?.classList.remove(this.invalidClass);
+    $invalidTarget?.classList.remove(this.validClass);
+
+    if (valid) {
+      this.$input?.classList.add(this.validClass);
+      this.el.classList.add(this.validClass);
+
+      $invalidTarget?.classList.add(this.validClass);
+    } else {
+      this.$input?.classList.add(this.invalidClass);
+      this.el.classList.add(this.invalidClass);
+
+      $invalidTarget?.classList.add(this.invalidClass);
+    }
+  }
+
+  getFormValidation(element?: Nullable<HTMLFormElement>): UnicornFormValidation | null {
+    return getBoundedInstance(element || this.getForm(), 'form.validation')!;
+  }
+
+  getValidator(name: string): [Validator, Record<string, any>] | null {
+    const matches = name.match(/(?<type>[\w\-_]+)(\((?<params>.*)\))*/);
+
+    if (!matches) {
+      return null;
+    }
+
+    const validatorName = matches.groups?.type || '';
+
+    const params = matches.groups?.params || '';
+
+    const fv = this.getFormValidation(this.$form!);
+    const validator = fv?.validators[validatorName] || UnicornFormValidation.globalValidators[validatorName];
+
+    if (!validator) {
+      return null;
+    }
+
+    const paramMatches = params.matchAll(/(?<key>\w+)(\s?[=:]\s?(?<value>\w+))?/g);
+    const options: Record<string, string> = {};
+
+    for (const paramMatch of paramMatches) {
+      const match = paramMatch?.groups as {
+        key: string;
+        value: string;
+      } | undefined;
+
+      if (!match) {
+        continue;
+      }
+
+      options[match.key] = handleParamValue(match.value);
+    }
+
+    return [validator, options];
+  }
+
+  handleCustomResult(result: boolean | string | undefined, validator?: Nullable<Validator>): boolean {
+    if (typeof result === 'string') {
+      this.$input?.setCustomValidity(result);
+      result = result === '';
+    } else if (result === undefined) {
+      result = true;
+    }
+
+    if (result) {
+      this.$input?.setCustomValidity('');
+    } else if (validator) {
+      this.raiseCustomErrorState(validator);
+    }
+
+    return result;
+  }
+
+  handleAsyncCustomResult(result: boolean, validator?: Nullable<Validator>): boolean {
+    result = this.handleCustomResult(result, validator);
+
+    // Fire invalid events
+    this.$input?.checkValidity();
+
+    this.updateValidClass(result);
+
+    return result;
+  }
+
+  raiseCustomErrorState(validator: Validator): void {
+    let help;
+
+    if (this.$input?.validationMessage === '') {
+      help = validator.options?.notice;
+
+      if (typeof help === 'function') {
+        help = help(this.$input, this);
+      }
+
+      if (help != null) {
+        this.$input?.setCustomValidity(help);
+      }
+    }
+
+    if (this.$input?.validationMessage === '') {
+      this.$input?.setCustomValidity(trans('unicorn.message.validation.custom.error'));
+    }
+
+    this.$input?.dispatchEvent(
+      new CustomEvent('invalid')
+    );
+  }
+
+  setAsInvalidAndReport(error: string) {
+    this.setCustomValidity(error);
+    this.showInvalidResponse();
+  }
+
+  setCustomValidity(error: string) {
+    this.$input?.setCustomValidity(error);
+  }
+
+  reportValidity() {
+    if (this.validationMessage !== '') {
+      this.showInvalidResponse();
+    }
+  }
+
+  showInvalidResponse() {
+    /** @type ValidityState */
+    const state = this.$input?.validity;
+    let message: string = this.$input?.validationMessage || '';
+
+    for (let key in state) {
+      if (state[(key as keyof ValidityState)] && this.$input?.dataset[key + 'Message']) {
+        message = this.$input?.dataset[key + 'Message'] || '';
+        break;
+      }
+    }
+
+    if (!this.isVisible) {
+      let title = this.findLabel()?.textContent;
+
+      if (!title) {
+        title = this.$input?.name || '';
+      }
+
+      useUITheme().renderMessage(
+        `Field: ${title} - ${message}`,
+        'warning'
+      );
+    }
+
+    let $help = this.getErrorElement();
+
+    if (!$help) {
+      $help = this.createHelpElement()!;
+      this.el.appendChild($help);
+      this.prepareWrapper();
+    }
+
+    $help.textContent = message;
+
+    this.updateValidClass(false);
+  }
+
+  getErrorElement() {
+    return this.el.querySelector(this.errorSelector);
+  }
+
+  createHelpElement() {
+    const className = this.options.errorMessageClass;
+    const parsed = this.parseSelector(this.errorSelector || '');
+
+    const $help = html(`<div class="${className}"></div>`)!;
+
+    $help.classList.add(...parsed.classes);
+
+    parsed.attrs.forEach((attr) => {
+      $help.setAttribute(attr[0], attr[1] || '');
+    });
+
+    parsed.ids.forEach((id) => {
+      $help.id = id;
+    });
+
+    return $help;
+  }
+
+  /**
+   * @see https://stackoverflow.com/a/17888178
+   */
+  parseSelector(subselector: string): { tags: string[]; classes: string[]; ids: string[]; attrs: string[][] } {
+    const obj: {
+      tags: string[];
+      classes: string[];
+      ids: string[];
+      attrs: string[][];
+    } = { tags: [], classes: [], ids: [], attrs: [] };
+    for (const token of subselector.split(/(?=\.)|(?=#)|(?=\[)/)) {
+      switch (token[0]) {
+        case '#':
+          obj.ids.push(token.slice(1));
+          break;
+        case '.':
+          obj.classes.push(token.slice(1));
+          break;
+        case '[':
+          obj.attrs.push(token.slice(1, -1).split('='));
+          break;
+        default :
+          obj.tags.push(token);
+          break;
+      }
+    }
+    return obj;
+  }
+
+  setAsValidAndClearResponse() {
+    this.setCustomValidity('');
+    this.updateValidClass(true);
+    this.clearInvalidResponse();
+  }
+
+  clearInvalidResponse() {
+    const $help = this.el.querySelector(this.errorSelector)!;
+
+    $help.textContent = '';
+  }
+
+  getForm() {
+    return this.el.closest(this.options.formSelector || '[uni-form-validate]') as HTMLFormElement;
+  }
+
+  findLabel() {
+    const id = this.$input?.id || '';
+
+    const wrapper = this.$input?.closest('[data-field-wrapper]');
+    let label = null;
+
+    if (wrapper) {
+      label = wrapper.querySelector('[data-field-label]');
+    }
+
+    if (!label) {
+      label = document.querySelector(`label[for="${id}"]`);
+    }
+
+    return label;
+  }
+}
+
+function camelTo(str: string, sep: string) {
+  return str.replace(/([a-z])([A-Z])/g, `$1${sep}$2`).toLowerCase();
+}
+
+validatorHandlers.username = function (value: any, element: HTMLElement) {
+  const regex = new RegExp('[\<|\>|"|\'|\%|\;|\(|\)|\&]', 'i');
+  return !regex.test(value);
+};
+
+validatorHandlers.numeric = function (value: any, element: HTMLElement) {
+  const regex = /^(\d|-)?(\d|,)*\.?\d*$/;
+  return regex.test(value);
+};
+
+validatorHandlers.email = function (value: any, element: HTMLElement) {
+  value = punycode.toASCII(value);
+  const regex = /^[a-zA-Z0-9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+  return regex.test(value);
+};
+
+validatorHandlers.url = function (value: any, element: HTMLElement) {
+  const regex = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/[^\s]*)?$/i;
+  return regex.test(value);
+};
+
+validatorHandlers.alnum = function (value: any, element: HTMLElement) {
+  const regex = /^[a-zA-Z0-9]*$/;
+  return regex.test(value);
+};
+
+validatorHandlers.color = function (value: any, element: HTMLElement) {
+  const regex = /^#(?:[0-9a-f]{3}){1,2}$/;
+  return regex.test(value);
+};
+
+/**
+ * @see  http://www.virtuosimedia.com/dev/php/37-tested-php-perl-and-javascript-regular-expressions
+ */
+validatorHandlers.creditcard = function (value: any, element: HTMLElement) {
+  const regex = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6011[0-9]{12}|622((12[6-9]|1[3-9][0-9])|([2-8][0-9][0-9])|(9(([0-1][0-9])|(2[0-5]))))[0-9]{10}|64[4-9][0-9]{13}|65[0-9]{14}|3(?:0[0-5]|[68][0-9])[0-9]{11}|3[47][0-9]{13})*$/;
+  return regex.test(value);
+};
+
+validatorHandlers.ip = function (value: any, element: HTMLElement) {
+  const regex = /^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$/;
+  return regex.test(value);
+};
+
+validatorHandlers['password-confirm'] = function (value: any, element: HTMLElement) {
+  const selector = element.dataset.confirmTarget;
+
+  if (!selector) {
+    throw new Error('Validator: "password-confirm" must add "data-confirm-target" attribute.');
+  }
+
+  const target = document.querySelector<HTMLInputElement>(selector);
+
+  return target?.value === value;
+};
+
+export { validatorHandlers as validators };
+
+// customElements.define(UnicornFormValidateElement.is, UnicornFormValidateElement);
+// customElements.define(UnicornFieldValidateElement.is, UnicornFieldValidateElement);
+
+export const ready = Promise.all([
+  useUniDirective('form-validate', {
+    mounted(el, binding) {
+      getBoundedInstance(el, 'form.validation', (ele) => {
+        return new UnicornFormValidation(ele as HTMLElement, JSON.parse(binding.value || '{}'));
+      });
+    },
+    updated(el, binding) {
+      const instance = getBoundedInstance<UnicornFormValidation>(el, 'form.validation');
+      instance.mergeOptions(JSON.parse(binding.value || '{}'));
+    }
+  }),
+
+  useUniDirective('field-validate', {
+    mounted(el, binding) {
+      getBoundedInstance<UnicornFieldValidation>(el, 'field.validation', (ele) => {
+        return new UnicornFieldValidation(ele as HTMLElement, JSON.parse(binding.value || '{}'));
+      });
+    },
+
+    updated(el, binding) {
+      const instance = getBoundedInstance<UnicornFieldValidation>(el, 'field.validation');
+      instance.mergeOptions(JSON.parse(binding.value || '{}') || {});
+    }
+  })
+]);
+
+function handleParamValue(value: any) {
+  if (!isNaN(Number(value))) {
+    return Number(value);
+  }
+
+  if (value === 'null') {
+    return null;
+  }
+
+  if (value === 'true') {
+    return true;
+  }
+
+  if (value === 'false') {
+    return true;
+  }
+
+  return value;
+}
+
+export interface ValidationModule {
+  UnicornFormValidation: typeof UnicornFormValidation;
+  UnicornFieldValidation: typeof UnicornFieldValidation;
+  ready: Promise<any>;
+  validators: typeof validatorHandlers;
+}