Conditional built-in validators

Hi there, I’m looking for a super basic conditional validation using built-in validators, but can’t seem to figure out how to accomplish it with vuelidate.

In essence:

fixedFee: {
  required: requiredIf('hasFixedFee'),
  minValue: minValue(1),
},

Problem is that minValue validator always triggers, even if fixedFee is empty or not required. How can I use the built-in minValue validator but make it conditional to hasFixedFee like requiredIf?

Having to supply my own validation function for such a simple use case seems overly complicated to me.

[dobromir-hristov]

You could create such a helper.

Here is an example - https://jsfiddle.net/dobromir/d20bL4oj/10/

Helper

const validateIf = (prop, validator) =>
  helpers.withParams({ type: 'validatedIf', prop }, function(value, parentVm) {
    return helpers.ref(prop, this, parentVm) ? validator(value) : true
  })

Usage

validations: {
    form: {
      password: {
      	minLength: validateIf('change_password', minLength(5))
      }
    }
  }

If anyone finds this useful, please vote or something, I could add it as a helper 😃

[skajfes]

I have solved a similar problem using dynamic validation schema, and it seems to me this is closely related. The docs are here: https://vuelidate.js.org/#sub-dynamic-validation-schema

My problem was having to validate a different set of fields based on selection. Ie, based on paymentType selection validate the appropriate input fields:

    validations() {
        let v = {
            // validators that are always applied
            
        };

        // different set of validators based on selection
        if (this.paymentType === 'credit-card') {
            v.creditCardNumber = {required};
        } 
        else if (this.paymentType === 'invoice') {
            v.companyName = {required};
            v.companySSN = {required};
        }
        return v;

Applied to the OP’s problem it would look like:

validations() {
     var v = {  };
    
     if (this.hasFixedFee) {
          v.fixedFee = { required, minValue: minValue(1) };
     }

     return v;
}