Limiting and debouncing validators

[vlukashov]

• validator() functions have access to the source event that trigges validation, and to the target form / field instance.
• Thus, they can be wrapped into filters or debouncers like onBlur or onSubmit to avoid running validations too often.
• The Vaadin Form library comes with a set of ready-to-use filters and debouncers: onBlur (for fields), onSubmit (for forms), debounce, etc

import {VaadinForm, onBlur} from '@vaadin/vaadin-form';

const form = new VaadinForm();
// init the form

const isAvailableName = async (value) => {
  const response = await fetch(`/validate/name/${encodeURIComponent(value)}`);
  const result = await response.json();
  if (result.error) {
    return `Please pick another name. '${value}' is not available.`;
  }
};

form.username.validator = [onBlur(isAvailableName)];