Introducing: Form Validation with Vorms in Quasar

[Mini-ghost]

Hi everyone,

Quasar is a popular UI framework known for its rich features and flexibility. In Quasar development, effective form validation is crucial. While Quasar provides built-in form validation, Vorms is an excellent form validation tool that offers more flexibility. Let's explore why choosing Vorms simplifies form validation in Quasar:

🔒 Type Safety
Vorms, written in TypeScript with extensive TSDoc documentation, leverages TypeScript's type checking for enhanced code reliability and maintainability.

⚡ Lightweight and Efficient
With a compressed size of only 12kb (4kb compressed + gzip compressed) and full tree-shaking support, integrating Vorms into Quasar projects doesn't increase file size significantly, improving performance and reducing page loading time.

🎨 Seamless Development Experience
Vorms utilizes Vue's Composition API, providing a smooth form validation development experience. It offers an elegant way to organize and reuse code while simplifying form validation logic.

🔧 Flexibility and Variety
Vorms supports popular form validation libraries like Yup and Zod, along with custom validation, allowing you to choose the most suitable approach based on your project requirements.

The following code is a simple example to see how Vorms integration form validation in Quasar:

<script setup>
import { useForm } from '@vorms/core';

const rulesResolver = (rules) => (value) => {
  const _rules = [...rules];
  let message = true;
  while (typeof message !== 'string' && _rules.length) {
    const rule = _rules.shift();
    message = rule(value);
  }

  return message ? undefined : message;
};

const { register, handleSubmit, handleReset } = useForm({
  initialValues: {
    name: '',
  },
  onSubmit(values) {
    alert(JSON.stringify(values, null, 2));
  },
});

const {
  value: name,
  error: nameError,
  attrs: nameAttrs,
} = register('name', {
  validate: rulesResolver([
    (val) => (val && val.length > 0) || 'Please type something',
  ]),
});
</script>

<template>
  <QForm
    class="q-pa-md q-gutter-md"
    @submit="handleSubmit"
    @reset="handleReset"
  >
    <QInput
      filled
      v-model="name"
      label="Your name *"
      hint="Name and surname"
      :error="!!nameError"
      :error-message="nameError"
      v-bind="nameAttrs"
    />
  </QForm>
</template>

To explore Vorms integration with Quasar, try out the demo: Quasar Integration with Vorms. It guides you on using Vorms for form validation in a Quasar application. Experience the convenience and flexibility Vorms brings!

Consider using Vorms as a form validation tool when working with Quasar for a successful development journey!

• github project: https://github.com/Mini-ghost/vorms
• documentations: https://vorms.mini-ghost.dev/

Looking forward to your feedback!

[metalsadman]

Looking like vee-validate, would love it if it were similar to vuelidate ie. model-based solution.

[Mini-ghost]

Yes! There are some similarities. I later discovered that both Vorms and vee-validate have been heavily influenced by Formik and React Hook Form. Additionally, the feedback I've received from frontend engineers around me is that Vorms has a smoother learning curve compared to vee-validate, which I believe is an advantage of Vorms.

Furthermore, we have adopted slightly different strategies for integrating third-party validation tools. You can refer to @vorms/resolvers for more information. Based on this approach, we can also convert the rules in the Quasar example to validate.

However, it is undeniable that vee-validate is a powerful package with a large and active user base. In this aspect, Vorms still has a long way to go and needs to put in more effort.

Vuelidate is also an excellent validation tool. It is based on a completely different API syntax, whether it's model-based or based on the Composition API. As long as it feels comfortable to use, it can be a good choice.