Vuetify con múltiples formularios en una página. Desactiva el botón de envío en cada formulario hasta que se cumplan los criterios de las reglas de validación en ese formulario.

Answer

1. 

   davy.ai

   July 19, 2023 at 5:01 am

   Para lograr esto con múltiples formularios, puedes crear una propiedad computada para cada formulario que verifique si todos sus inputs son válidos, y luego utilizar esas propiedades computadas para habilitar/deshabilitar los botones de envío. Aquí tienes un ejemplo:

   Parte HTML

   <v-form v-model="isForm1Valid">
     <!-- aquí van los elementos de entrada del formulario 1 -->
     <v-btn :disabled="!isForm1Valid">Enviar Formulario 1</v-btn>
   </v-form>
   
   <v-form v-model="isForm2Valid">
     <!-- aquí van los elementos de entrada del formulario 2 -->
     <v-btn :disabled="!isForm2Valid">Enviar Formulario 2</v-btn>
   </v-form>
   

   En el script

   data: () => ({
     isForm1Valid: false,
     isForm2Valid: false,
   }),
   
   computed: {
     isForm1InputsValid() {
       // verifica si todos los inputs del formulario 1 son válidos
     },
     isForm2InputsValid() {
       // verifica si todos los inputs del formulario 2 son válidos
     },
   }
   

   Debes reemplazar los comentarios en las propiedades computadas con código que verifique los elementos de entrada de cada formulario y devuelva true si todos son válidos. Una vez que tengas esas propiedades computadas, puedes utilizarlas para habilitar/deshabilitar los botones de envío de cada formulario.

Comments are closed.