Vue js vuelidate cannot read custom validation inside the dynamic validation schema

Question

I have this UI. If user check the All dates it will set the Boolean variable is_all_dates to true.So that means user don't care a date range he/she wants all the data without filter it by a date range.

On the other hand if user doesn't check the All dates I need to validate 3 things.

He/she enter a from date (required)
He/she enter a to date (required)
From date < To date (custom validator)

For achieve this requirement I use dynamic validation schema.

I only need validate if All dates is equals to false. otherwise I don't need validations at all.

validations() {
        if (!this.is_all_dates) {
          return {
            from: {
              required
            },
            to: {
              required,
              date_greather_than
            }
          };
        }
      },

I declare my date_greather_than validation like this.

<script>
    const date_greather_than = (value, vm) => {
      let from = new Date(vm.from);
      let to = new Date(value);
      return from < to;
    };
    export defaults:{
        validations(){},
        data(){return{}}
    }
</script>

But the problem is I got an error

TypeError: Cannot read property 'date_greather_than' of undefined

My custom validator is not recognize inside the validations() function

I can use the keyword this like this. It's syntax error.

to: {
                  required,
                  this.date_greather_than
                }

code like that in App.vue in this example codesandbox.io/s/w2n99onq78 — Boussadjra Brahim
– Boussadjra Brahim, Commented Nov 11, 2018 at 15:36
@BoussadjraBrahim I have another boolean variable called is_all_dates. If that is_all_dates == false then only I need to this happen. The problem comes when I use the if statement. — margherita pizza
– margherita pizza, Commented Nov 11, 2018 at 15:44

margherita pizza · Accepted Answer · 2018-11-15 17:55:48Z

2

I found the answer. The problem here was I only specify the if part only. By specifying both if part and else part my code works as expected.

validations() {
    if (this.is_limit_by_range) {
      return {
        to: { required, date_greather_than },
        from: { required },
        status: { required }
      };
    } else {
      return {
        status: { required }
      };
    }
  }

answered Nov 15, 2018 at 17:55

margherita pizza

7,30730 gold badges105 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue js vuelidate cannot read custom validation inside the dynamic validation schema

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related