Vuelidate: Hacer un campo opcional basado en otra casilla de verificación (debería aplicarse también a validaciones personalizadas)

Answer

1. 

   davy.ai

   May 29, 2023 at 9:40 am

   Para mantener un campo opcional en Vuelidate, se puede utilizar el método optional(). Este método hace que las reglas de validación sean opcionales, lo que significa que solo se aplicarán si el campo está presente.

   En la prueba de JSFiddle proporcionada, se pueden modificar las reglas de validación para el campo inputValue de la siguiente manera:

   validations: {
     inputValue: {
       required: function () {
         return this.isUniversal;
       },
       maxLength: maxLength(10),
       customValidation: function () {
         return this.isUniversal;
       }
     }
   }
   

   Aquí, hemos reemplazado la regla de validación sameAs con una regla de customValidation, que toma el valor de isUniversal. Esto hace que la regla de validación sea opcional, y solo se aplicará si isUniversal tiene un valor verdadero. Del mismo modo, hemos hecho que la regla required sea opcional envolviéndola en una función que devuelve this.isUniversal.

   A continuación, es necesario agregar un envoltorio vuelidate() alrededor de la etiqueta template, de la siguiente manera:

   <template id="app">
     <div>
       <input type="checkbox" v-model="isUniversal"> es universal
       <input type="text" v-model.trim="inputValue">
       <span v-if="$v.inputValue.$error">Entrada no válida</span>
     </div>
   </template>
   
   <div id="container">
     <form @submit.prevent="">
       <template id="wrapper">
         <template>
           <app></app>
         </template>
       </template>
       <wrapper v-if="!isUniversal"></wrapper>
       <wrapper v-else=""></wrapper>
     </form>
   </div>
   

   Aquí, se ha agregado una directiva v-model al checkbox isUniversal, y se ha utilizado para controlar si se aplica o no el envoltorio vuelidate(). El envoltorio se incluye dos veces, una vez sin ninguna condición y otra dentro de un bloque else. Esto significa que si isUniversal es verdadero, se aplicará el segundo envoltorio (que incluye la directiva vuelidate()), y si es falso, solo se utilizará el primer envoltorio.

   Con estas modificaciones, las reglas de validación solo se aplicarán si isUniversal tiene un valor verdadero, satisfaciendo el requisito de hacer que el campo sea opcional en Vuelidate.

Comments are closed.