Passing Extra Parameters in Vuetify Rules Definition

Question

My goal is to define my rules once and then reuse them for all of my fields. To do this, I need to pass extra parameters to my rules, like maxlength of 20 on one v-text-field, but a maxlength of 50 on another. From what I see, only the value is getting passed. How can I add extra parameters to my rules?

<template>
  <v-input :rules=[rules.max(20)] v-model="field1" />
  <v-input :rules=[rules.max(50)] v-model="field2" />
</template>
<script>    
  data() {
    rules: {
      max(v, maxnum) { //maxnum is the parameter I want to add so that I can pass different values and reuse the same rule on multiple fields
        return (v || '').length <= maxnum || 'Max exceeded';
      }
    }
  }
</script>

score 20 · Answer 1 · answered Nov 15 '19 at 20:08

You need a function that returns the rule function. The wrapper function should accept any extra params that the rules function doesn't know about (anything other than the value):

<template>
  <v-input :rules=[rules.max(20)] v-model="field1" />
  <v-input :rules=[rules.max(50)] v-model="field2" />
</template>

<script>    
  data() {
    rules: {
      max(maxNum) {
        return v => (v || '').length <= maxNum || 'Max exceeded';
      }
    }
  }
</script>

score 3 · Answer 2 · answered Feb 19 '20 at 09:40

3

just pass v-model variable as second parameter to your rule.

<template>
  <v-input :rules=[rules.max(20, field1)] v-model="field1" />
  <v-input :rules=[rules.max(50, field1)] v-model="field2" />
</template>

<script>    
  data() {
    rules: {
      max(maxnum, v) { 
        return (v || '').length <= maxnum || 'Max exceeded';
      }
    }
  }
</script>

answered Feb 19 '20 at 09:40

mostafaznv

958
14
24

1

By default the value is passed to the rule function already so no need to pass it in. – Chase DeAnda Jun 11 '20 at 19:52
2

@ChaseDeAnda No it doesn't. You need to manually add it when sending own parameters. – Daniele Testa Feb 22 '23 at 17:52

score 1 · Answer 3 · answered Aug 19 '21 at 12:04

Quasar example

The rules property expects an array. This is one of the correct ways to do it:

<template>
  <!-- ... -->
  <q-input
     v-model="username"
     label="Username"
     :rules="maxRule(30)"
     />
  <!-- ... -->
</template>

<script>
import { ref } from 'vue'
export default {
  setup (props) {
    const username = ref(null)
    const maxRule = (limit) => [val => val.length <= limit || `Please use maximum ${limit} characters`]
    return {
      username,
      maxRule 
    }
  }
}
</script>

score 1 · Answer 4 · answered Aug 25 '23 at 09:01

1

This is easily implemented by resorting to a high-order-function:

<template>
  <v-input :rules=[rules.max(20)] v-model="field1" />
  <v-input :rules=[rules.max(50)] v-model="field2" />
</template>
<script>    
  data() {
    rules: {
      max: (maxnum) => (value) => {
        return (v || '').length <= maxnum || 'Max exceeded'
      }
    }
  }
</script>

Like this rules.max(5) returns (value) => return (v || '').length <= 5 || 'Max exceeded'

answered Aug 25 '23 at 09:01

Pedro Rolo

28,273
12
60
94

This is much cleaner. With typescript though, whats the highest order functions type? – Second2None Aug 30 '23 at 00:25
1

it's a function that gets a number and returns a function that gets an number and returns a validation result. I suppose that the validation result is boolean | string – Pedro Rolo Aug 31 '23 at 13:20
I ended up creating a custom type that allowed multiple parameters. Not sure if this is correct but its working. `export type ValidationFunction = ( s: T, b?:T, d?:T ) => (c: T) => boolean | string` – Second2None Aug 31 '23 at 13:23
// I guess this type Validation = (value: string) => string | boolean; (maxnum:number): Validation => (value:string) => { return (v || '').length <= maxnum || 'Max exceeded' } – Pedro Rolo Aug 31 '23 at 13:44

Passing Extra Parameters in Vuetify Rules Definition

4 Answers4

Quasar example

Linked