Como Validar un Formulario con Vue JS 3 – Parte 2 (Final)

5 minuto(s)

En esta página:

Demo Github

En la parte anterior llamada Como Validar un Formulario con Vue JS 3 – Parte 1 creamos nuestro proyecto nuevo con Vite JS, realizamos una serie de pasos para que la creación del proyecto Vue JS se despliegue correctamente. Luego pasamos a crear el código HTML para el formulario, usamos Bootstrap 5 (es opcional) y dejamos listo para comenzar la validación con Vue JS. En esta segunda y última parte haremos la validación del formulario, vamos con ello.

Partes

Parte 1
Parte 2 (Final – Código Fuente GitHub)

Aplicación Web creada con Vue JS — Vue es una framework flexible

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Porque Todo Desarrollador Debes Ser Autodidacta” y “¿ Se Debe Escuchar Música Mientras Se Programa ?” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Validar un Formulario con Vue JS 3 – Parte 2 (Final).

JavaScript

Dentro de las etiquetas <script></script> definimos primero los datos a usar:


<script>
  export default {
    // Definimos los datos a usar 
    data() {
      return {
        errors: [],
        nya: null,
        email: null,
        asunto: null,
        area: "",
        archivo: null,
        mensaje: null,
      }
    }
  }
</script>

export default {

// Definimos los datos a usar

data() {

return {

errors: [],

nya: null,

email: null,

asunto: null,

area: "",

archivo: null,

mensaje: null,

}

</script>

Para validar el formulario creamos el método validarFormulario(), en este método verificamos si los campos están vacios, si es así enviamos un mensaje de validación:


<script>
  export default {
    // Definimos los datos a usar 
    data() {
      return {
        errors: [],
        nya: null,
        email: null,
        asunto: null,
        area: "",
        archivo: null,
        mensaje: null,
      }
    },
    methods: {
      // Función para validar los campos del formulario 
      validarFormulario: function (e) {
        if (this.nya && this.email && this.asunto && this.area && this.archivo !== null && this.mensaje) {
          return true;
        }
        
        this.errors = [];

        if (!this.nya) {
          this.errors.push('Por favor, ingresa tus Nombres y Apellidos.');
        }
        if (!this.email) {
          this.errors.push('Por favor, ingresa tu Email.');
        }
        if (!this.asunto) {
          this.errors.push('Por favor, ingresa un Asunto.');
        }
        if (!this.area) {
          this.errors.push('Por favor, Selecciona un Área.');
        } 
        if (!this.archivo) {
          this.errors.push('Por favor, Selecciona un Archivo.');
        }
        if (!this.mensaje) {
          this.errors.push('Por favor, ingresa tu Mensaje.');
        }
        
        e.preventDefault();
      }      
    }
  }
</script>

export default {

// Definimos los datos a usar

data() {

return {

errors: [],

nya: null,

email: null,

asunto: null,

area: "",

archivo: null,

mensaje: null,

}

methods: {

// Función para validar los campos del formulario

validarFormulario: function (e) {

if (this.nya && this.email && this.asunto && this.area && this.archivo !== null && this.mensaje) {

return true;

}

this.errors = [];

if (!this.nya) {

this.errors.push('Por favor, ingresa tus Nombres y Apellidos.');

}

if (!this.email) {

this.errors.push('Por favor, ingresa tu Email.');

}

if (!this.asunto) {

this.errors.push('Por favor, ingresa un Asunto.');

}

if (!this.area) {

this.errors.push('Por favor, Selecciona un Área.');

}

if (!this.archivo) {

this.errors.push('Por favor, Selecciona un Archivo.');

}

if (!this.mensaje) {

this.errors.push('Por favor, ingresa tu Mensaje.');

}

e.preventDefault();

}

</script>

Por último creamos el método archivoSeleccionado() que verificará si el usuario ha seleccionado un archivo en el campo archivo:


<script>
  export default {
    // Definimos los datos a usar 
    data() {
      return {
        errors: [],
        nya: null,
        email: null,
        asunto: null,
        area: "",
        archivo: null,
        mensaje: null,
      }
    },
    methods: {
      // Función para validar los campos del formulario 
      validarFormulario: function (e) {
        if (this.nya && this.email && this.asunto && this.area && this.archivo !== null && this.mensaje) {
          return true;
        }
        
        this.errors = [];

        if (!this.nya) {
          this.errors.push('Por favor, ingresa tus Nombres y Apellidos.');
        }
        if (!this.email) {
          this.errors.push('Por favor, ingresa tu Email.');
        }
        if (!this.asunto) {
          this.errors.push('Por favor, ingresa un Asunto.');
        }
        if (!this.area) {
          this.errors.push('Por favor, Selecciona un Área.');
        } 
        if (!this.archivo) {
          this.errors.push('Por favor, Selecciona un Archivo.');
        }
        if (!this.mensaje) {
          this.errors.push('Por favor, ingresa tu Mensaje.');
        }
        
        e.preventDefault();
      },
      // Función para validar un archivo seleccionado 
      archivoSeleccionado(event) {
        this.archivo = event.target.files[0];
      }
    }
  }
</script>

export default {

// Definimos los datos a usar

data() {

return {

errors: [],

nya: null,

email: null,

asunto: null,

area: "",

archivo: null,

mensaje: null,

}

methods: {

// Función para validar los campos del formulario

validarFormulario: function (e) {

if (this.nya && this.email && this.asunto && this.area && this.archivo !== null && this.mensaje) {

return true;

}

this.errors = [];

if (!this.nya) {

this.errors.push('Por favor, ingresa tus Nombres y Apellidos.');

}

if (!this.email) {

this.errors.push('Por favor, ingresa tu Email.');

}

if (!this.asunto) {

this.errors.push('Por favor, ingresa un Asunto.');

}

if (!this.area) {

this.errors.push('Por favor, Selecciona un Área.');

}

if (!this.archivo) {

this.errors.push('Por favor, Selecciona un Archivo.');

}

if (!this.mensaje) {

this.errors.push('Por favor, ingresa tu Mensaje.');

}

e.preventDefault();

// Función para validar un archivo seleccionado

archivoSeleccionado(event) {

this.archivo = event.target.files[0];

}

</script>

En nuestro formulario HTML llamamos al método validarFormulario() cuando presionemos el botón Enviar y en el campo archivo cuando el usuario elija una imagen, llamamos al método archivoSeleccionado():


<form @submit="validarFormulario">
  <p v-if="errors.length">
    <b>Por favor verificar:</b>
  <ul>
    <li v-for="error in errors" class="text-danger">{{ error }}</li>
  </ul>
  </p>
  <div class="mb-3">
    <label for="nya" class="form-label">Nombres y Apellidos</label>
    <input type="text" class="form-control" id="nya" v-model="nya" aria-describedby="nyaHelp">
    <div id="nyaHelp" class="form-text">Ejemplo: Carlos Rojas Torres</div>
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" v-model="email" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">Ejemplo: crojas@mail.com</div>
  </div>
  <div class="mb-3">
    <label for="asunto" class="form-label">Asunto</label>
    <input type="text" class="form-control" id="asunto" v-model="asunto" aria-describedby="asuntoHelp">
    <div id="asuntoHelp" class="form-text">Ejemplo: Compra de Productos</div>
  </div>
  <div class="mb-3">
    <label for="area" class="form-label">Área o Departamento</label>
    <select class="form-select" id="area" v-model="area" aria-label="Default select example" aria-describedby="areaHelp">
      <option value="" disabled selected>Seleccionar:</option>
      <option value="1">Ventas</option>
      <option value="2">Marketing</option>
      <option value="3">Soporte</option>
    </select>
    <div id="areaHelp" class="form-text">Ejemplo: Ventas</div>
  </div>
  <div class="mb-3">
    <label for="archivo" class="form-label">Adjuntar Archivo</label>
    <input class="form-control" type="file" id="archivo" v-on:change="archivoSeleccionado">
  </div>
  <div class="mb-3">
    <label for="mensaje" class="form-label">Mensaje</label>
    <textarea class="form-control" id="mensaje" v-model="mensaje" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

<b>Por favor verificar:</b>

<ul>

<li v-for="error in errors" class="text-danger">{{ error }}</li>

</ul>

</p>

<label for="nya" class="form-label">Nombres y Apellidos</label>

<div id="nyaHelp" class="form-text">Ejemplo: Carlos Rojas Torres</div>

</div>

<label for="email" class="form-label">Email</label>

<div id="emailHelp" class="form-text">Ejemplo: crojas@mail.com</div>

</div>

<label for="asunto" class="form-label">Asunto</label>

<div id="asuntoHelp" class="form-text">Ejemplo: Compra de Productos</div>

</div>

<label for="area" class="form-label">Área o Departamento</label>

<option value="" disabled selected>Seleccionar:</option>

<option value="1">Ventas</option>

<option value="2">Marketing</option>

<option value="3">Soporte</option>

</select>

<div id="areaHelp" class="form-text">Ejemplo: Ventas</div>

</div>

<label for="archivo" class="form-label">Adjuntar Archivo</label>

</div>

<label for="mensaje" class="form-label">Mensaje</label>

</div>

<button type="submit" class="btn btn-primary">Enviar</button>

</form>

Entonces si el usuario presiona el botón Enviar del formular, este le mostrará errores de validación:

Y si el usuario ingresa por ejemplo un email, entonces ya no le arrojará el error sobre el email, si no de los otros campos:

Validación de email con Vue JS 3 — El usuario ingreso el email y ya no le muestra mensaje de validación para el email

Bien con esto entonces hemos validado nuestro formulario HTML con Vue JS 3, al inicio de cada Parte del Post he colocado una Demo en donde puedes ver el proyecto en acción, asimismo al inicio de esta 2da y última parte he colocado un enlace al repositorio GitHub en donde he colocado el código del proyecto.

Conclusión

En este tutorial has aprendido a Como Validar un Formulario con Vue JS 3, saber hacerlo es una base para validar formularios más avanzandos. Recuerda que conforme práctiques más, mejorarás en Vue JS 3, como se dice la práctica hace al maestro.