cuatromedios / quasar-app-extension-vuelidate-rules Goto Github PK

Can I use this with Quasar plugin instead Quasar CLI?

Hi, after installing this extension I cannot run my app with quasar dev because I get an error:
App • ⚠️ Extension(vuelidate-rules): Dependency not found - @quasar/app. Please install it.
I suppose that it's because i use Quasar with Vite, so in my package.json I have "@quasar/app-vite": "^1.0.0-alpha.0" and no @quasar/app
Could you make it compatible with Vite?

Hello, I'm using Volar + VS Code.

In main.ts file i have import
import quasarRegisterVuelidateRules from 'quasar-app-extension-vuelidate-rules/src/boot/register-vuelidate-rules';
then i registred it globally
quasarRegisterVuelidateRules({ app });

But in component i have an issue in line
:rules="[$rules.requiredIf(hasWatchers, ERROR_MESSAGES.required)]"
VS Code highlited $rules - Cannot find name (ts2304).

Validation work, but how can I disable this error message.

Can you make this extension compatible with quasar v2 please? May just mean updating the package definition.

Thanks!

Hi, I like this plugin very much.
However, I can't find out how to reset the entire form (or all inputs with rules), after using it the first time (or after I cancel the form).
All my inputs on the form have as v-model a sub-property of a formdata-object which is a computed, based on a Object-prop in Vue3 Composition API :

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
});

const formdata = computed({
  get: () => props.modelValue,
  set: (newvalue) => {
    emit("update:modelValue", newvalue);
  },
});

the form inputs look like this :

<q-input
    v-model="formdata.name"
    label="Name"
    :rules="[
      $rules.required('Name is required'),
    ]"
/>

In the Vuelidate docs I see something like
this.$v.$reset()
but with your plugin I can't find such an object anywhere.

Hope you can help!

Does this library support requiredif? If so, can you please add it to the list of examples, especially syntax?

I'm wondering how I could use the $rules variable inside a method ?

I'm trying to make an array of rules, and have a helper function to retrieve the right rule for each field.

const rules_array = [
  {
    fieldname: 'KlantID',
    rules: [
      veld('klant.required') &&
        $rules.required(veld('klant.required_error')),
    ],
  },
  {
    fieldname: 'LokatieID',
    rules: [
      veld('lokatie.required') &&
        $rules.required(veld('lokatie.required_error')),
    ],
  },
];

The helper method looks something like this:

function getRules(fieldname) {
  const rule = rules_array .find((rule) => {
    return rule.fieldname === fieldname;
  });
  if (rule) {
    return rule.rules;
  } else {
    return false;
  }
}

Inside the HTML I want to use this attribute :
:rules="getRules('KlantID')"

This doesn't work because the $rules variable is not known inside the rules_array declaration.

Any idea?

I would like to disable the "submit" button if there is a rules error. Can you look at this post and let me know how to do this with your library please?

https://discord.com/channels/415874313728688138/596275881907978240/812664330868359238

:rules="[$rules.required('Name is required'),$rules.alphaNum('Name should be alpha numeric')]"
By checking above rule field should be required as well as field will only valid for apha and numerics but the issue was when we given the space its throwing error.
how can we full fill that requirement like accepting the value with space/some special characters as well.

how can add my own regex like(regex('alpha', /^[a-zA-Z]*$/)).

Thanks in advance

Love this! So elegant! I have some very complex forms to build with dozens of fields and this will make things much cleaner. Thank you.

Is it possible to have typescript definitions for this? And/or to make it work like a vue component the same way that many on https://vueuse.org/ work?

Apologies for asking: I attempted to do this myself, but my typescript-fu is lacking at the moment (started first major quasar project a few days ago) and I could not create code that would compile and meet all the type constraints of vuelidate itself.

This is not an issue, but a question. How do I load this extension in a component test?

For example, I am using the $rules.minValue) validator, but when my test executes I get a TypeError: Cannot read property 'minValue' of undefined error. I do not understand how to load this extension in the Quasar test. I tried just using the name of the extension as it is named in quasar.extensions.json, but that does not work:

const wrapper = mountQuasar(MyComponent, {
  quasar: { components },
  mount: { localVue, store },
  propsData: { ... },
  plugins: ['vuelidate-rules']
});

I sense that the extension shouldn't be loaded in that plugins section but I can't find any docs on any other way to do it. Any ideas?