Saltar al contenido

Vuelidate: validar al hacer clic, no al tocar campo

Luego de consultar con especialistas en el tema, programadores de varias ramas y maestros hemos dado con la solución al problema y la compartimos en este post.

Solución:

Realmente nunca pude acostumbrarme a la forma en que Vuelidate hace las cosas, pero, en términos generales, funciona así: https://monterail.github.io/vuelidate/#sub-basic-form

Configurarlo de esta manera le permite tener una validación para cada entrada/elemento del formulario y luego una verificación general para ver si el formulario está “sucio” y/o “no válido”

form: 
"name": 
"required": false,
"$invalid": true,
"$dirty": false,
"$error": false,
"$pending": false,
"$params": 
  "required": 
    "type": "required"
  

,
"Age": 
  "required": false,
  "$invalid": true,
  "$dirty": false,
  "$error": false,
  "$pending": false,
  "$params": 
    "required": 
      "type": "required"
    
  
,
"$invalid": true,  <------- This is what you are after for valid/invalid
"$dirty": false,   <------- This is what you are after to see if the form has been used.
"$error": false,  <-------  This checks both invalid and dirty
"$pending": false,
"$params": 
   "nestedA": null,
   "nestedB": null


En cuanto al uso de esto en la práctica, una opción sería llamar al evento de forma de validación al enviar.

@click.prevent="validateform"

Luego cree un método de forma de validación en su instancia de vue que verifique

$v.form.$invalid  or $v.form.$error

luego muestre los errores o llame al método de envío real

Luego, lo único que debe hacer después de configurar las validaciones es llamar a un método que validará los errores. Así que sigue a continuación:


El método:

validate () 
  this.$v.$touch() //it will validate all fields
  if (!this.$v.$invalid)  //invalid, becomes true when a validations return false
   //you dont have validation error.So do what u want to do here
  

Sección de Reseñas y Valoraciones

Si tienes algún reparo o capacidad de aclarar nuestro post te sugerimos ejecutar una explicación y con gusto lo ojearemos.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *