Vuelidate: Make field optional based on other checkbox (should apply to custom validations as well)

Question

How to keep a field optional in Vuelidate?

Vuelidate gives $v in code. To check form validation we have $invalid prop Now how do I keep x field optional based on checkbox thing eg.

[ ] use y field
[ y text field ] (right now optional)

but if i check the checkbox

[x] use y field
[ y text field ] (now its required and it will follow other validations such as sameAs/minLength/max/custom validation

PS: It should also validate custom validations as well.

I have this jsfiddle. What I want is, If I check the is universal box then only validations should apply over the input box else the validations should be ignored and $invalid should be false

Answer 1

you need to change your validations property to a function, this will let you to access state using this. also you need to check your checkbox value in your custom validators too:

validations() {
  return {
    text: {
        required: requiredIf(function () {
        return this.isUniversal
      }),
      roblox (val) {
        return this.isUniversal ? !!val.match(/roblox.com/) : true
      }
    }
  }
},

i edited your jsfiddle