Walidacja

Do walidacji formularzy używana jest biblioteka VeeValidate (opens new window), która obsługuję złożone walidacje w łatwy sposób. Wspiera walidację synchroniczną i asynchroniczną. Przykład użycia razem z Quasarem (opens new window)

TIP

Core używa również biblioteki yup (opens new window). Biblioteka ta oferuje gotowe reguły, które można użyć do walidacji. VeeValidate posiada wbudowaną obsługę schematów yup.

Przykład użycia

Żeby skorzystać z walidacji na formularzu zalecane jest używanie bazowych komponentów z modułu core tj. BaseForm, VInput, VSelect itd. Komponenty te dostosowane są pod pakiet VeeValidate.

<script setup>
  import { useQuasar } from "quasar";
  import { useForm } from "vee-validate";
  import { object, string } from "yup";

  const props = defineProps({
    alias: {
      type: String,
      default: "employee.employees",
    },
    currentValues: {
      type: Object,
      default: null,
    },
    onSubmit: {
      type: Function,
      default: () => {},
    },
  });

  const { loading } = useQuasar();

  const { handleSubmit, resetForm } = useForm({
    initialValues: getInitialValues(),
    validationSchema: object({
      first_name: string().required().label("labels.first_name"),
      last_name: string().required().label("labels.last_name"),
    }),
  });

  watch(
    () => props.currentValues,
    (value) => {
      if (value) {
        resetForm({
          values: getInitialValues(value),
        });
      }
    }
  );

  const handleFormSubmission = handleSubmit(async (values, { setErrors }) => {
    try {
      loading.show();

      await props.onSubmit(values);
    } catch (error) {
      setErrors(getFormValidationErrors(error));
    } finally {
      loading.hide();
    }
  }, onFormInvalidSubmit);

  function getInitialValues(data) {
    const initialValues = {
      first_name: "",
      last_name: "",
    };

    const _values = props.currentValues || data;

    if (_values) {
      return getFormFields(_values, initialValues);
    }

    return initialValues;
  }
</script>

<template>
  <base-form>
    <div class="row q-col-gutter-md">
      <v-input
        class="col-sm-3 col-xs-12"
        name="first_name"
        :label="$t('labels.first_name')"
      />

      <v-input
        class="col-sm-3 col-xs-12"
        name="last_name"
        :label="$t('labels.last_name')"
      />
    </div>

    <base-form-btn-group
      @submit="handleFormSubmission"
      @cancel="$router.push({ name: `${alias}.index` })"
    />
  </base-form>
</template>

Funkcja label w validationSchema przyjmuje jeden argument, może on być następujących typów:

• string (klucz tłumaczenia)
• obiekt
• tablica

Finalnie argument ten przekazywany jest do funkcji t (opens new window).