Quasar App Extension Vuelidate Rules

The elegance of Quasar's internal validation with the power of Vuelidate's built-in validators.

Quasar Framework offers a very practical way to validate form fields, using the rules attribute in Field wrapper, input and select component. The attribute accepts an array of functions that returns true or a string with an error message.

In most cases this is enough, but in some cases you need more complex validations. Quasar's documentation recommends Vuelidate as an external validation solution, but using this approach has a downside: You cannot use external validation to validate child components of a Form.

Leveraging the power of Vuelidate also requires more code to set up a validation, add the validations property to the component to define the rules and bind the error and error-message attributes of the component.

This extension exposes Vuelidate methods so they can be used as Quasar internal rules.

More information about Quasar Validation: https://quasar.dev/vue-components/field#Validation and Form component: https://quasar.dev/vue-components/form

Install

Quasar 2 compatible ( => version 0.4.0 )

quasar ext add vuelidate-rules

For Quasar 1, please use version 0.3.2

Usage

The extension will inject the $rules object to the Vue instance, the rules will then be available in the components. The customized error message is optional, always as the last parameter, and if not provided it will return false.

• If no parameters are needed:

  $rules.alpha() 
  $rules.alpha('Please use only letters')

• If parameters are needed:

  $rules.between(10,100)
  $rules.between(10,100, 'Please enter a number between 0 and 100')

Available methods

• All methods receive a last optional parameter with the customized error message.

Examples

Using several rules

<q-input
    v-model="form.name"
    label="Your name *"
    hint="Name and surname"
    :rules="[
      $rules.required('Your name is required'),
      $rules.alpha('Your name should not have numbers'),
      $rules.minLength(3, 'Your name should have at least 3 letters'),
      $rules.maxLength(10, 'Your name should not be larger than 10 letters') 
    ]"
/>

Using logic operators

<q-input
    v-model="form.age"
    label="Your age *"
    :rules="[
      $rules.or($rules.between(10,15), $rules.between(20,25)),
    ]"
/>

<q-input
    v-model="form.age"
    label="Your age *"
    :rules="[
      $rules.or(
        $rules.and(
          $rules.between(10,17),
          $rules.between(16,25)
        ),
        $rules.minValue(17),
        'Or nd message 2'
      ),
    ]"
  />

Modified methods

These methods are not the original Vuelidate methods but modified versions

TBD

Other not Vuelidate methods

Check if is a specific value. This is not a method of Vuelidate but may be useful, so it was added. Can be tied to other data properties, for example to check if a password is the same as the confirmation (not reactive yet)

<q-field
        :value="form.accept"
        label="Please read the license"
        stack-label
        :rules="[
           $rules.is(true, 'Please accept the license')
        ]"
      >
        <q-toggle v-model="form.accept" label="I accept the license and terms" />
</q-field>

To do

• Make locator based methods like sameAs or requiredIf to work, or develop an alternative

Related projects

• Quasar Framework https://quasar.dev/
• Vuelidate https://vuelidate.js.org
• NeQu (Nest + Quasar Boilerplate) https://github.com/cuatromedios/nequ