Home > OS >  vuelidate - How to display custom validation message with built-in validators
vuelidate - How to display custom validation message with built-in validators

Time:07-20

I am using vuelidate library for validating my forms. I have to use the built-in validators with the custom message. I have tried below. But not working. Ref: Vuelidate Form validation library

validations() {
   return {
     email: {
       requiredIf: requiredIf(() => {
         return this.data.enablevalidation;
       }),
       email: helpers.withMessage(this.data.validation_err_message, email),
     },
   };
},

my problem is, If the validation is false, still its validating the email also. Validation should be pass based on the both condition. If validation false, Email validation also should not work. How to achieve this scenario

CodePudding user response:

We have to use the helpers with functional method to achieve this.

validations () {
   return {
     email: {
       requiredIf: helpers.withMessage(this.data.validation_err_message, 
          requiredIf(() => {
            return this.data.enablevalidation
       })),
       email: helpers.withMessage(this.data.validation_err_message, email),
     }
   }
},

Initiallty it will validate, whether this field have to validate or not. If validation is true, It will display the given message. Email will be validate if given wrong.

  • Related