Artículo original escrito por: Joy Shaheb
Artículo original: Learn JavaScript Form Validation - Build a JS Project for Beginners
Traducido y adaptado por: Jorge Torres

Hoy aprenderemos como hacer una validación de formulario en JavaScript. También agregaremos imágenes y media queries para construir todo el proyecto e incluso puedes guardarlo como parte de tu portafolio.

Esta es la demostración del proyecto que vamos a construir?

Frame-30--1-
Desktop design

Esta es una pequeña muestra de como funcionaría el formulario?

ejemplo de projecto
project sample

Si lo deseas,  puedes ver también este tutorial de YouTube:

Código fuente

Puedes obtener el código fuente, incluyendo las imágenes, en los siguientes enlaces:

Como configurar el proyecto

Frame-1--1-

Sigue estos pasos para configurar nuestro proyecto: ?

  • Crea una nueva carpeta con el nombre "Proyecto" y abre VS Code
  • Crea los archivos índice.html, estilos.css y main.js
  • Enlaza los archivos dentro del HTML
  • Descarga las imágenes de mi repositorio de GitHub.
  • Pega este enlace de font-awesome dentro de la etiqueta head en el HTML. Así  podremos tener acceso a iconos de Font Awesome  ??
<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      crossorigin="anonymous"
    />
Frame-2--1-

Esto es lo que cubriremos

  • Escribiendo el HTML
  • Agregando CSS
  • Escribiendo JavaScript
  • Agregar un botón de redes sociales
  • Agregando imágenes
  • Media queries para la versión móvil (Diseño responsivo)
Frame-20--2-
Table of contents

Como escribir el HTML

Frame-3

Crea una clase llamada  .container  dentro de la etiqueta body la cual va a alojar la etiqueta del formulario (form) y que al mismo tiempo tendrá el identificador de form.?

<div class="container">

	<form id="formulario"></form>
    
</div>

Y dentro de la etiqueta form, crea 4 divs, como este ejemplo ?

<form id="formulario">

    <div class="titulo">Empezar</div>
    
    <div></div>
    <div></div>
    <div></div>
    
</form>

Dentro de esas 3 etiquetas div vacías, vamos a crear 3 entradas [nombreDeUsuario, correoElectronico y contraseña] junto con los iconos y etiquetas.

Nota: vamos a crear una clase con nombre .error. Aquí usaremos JavaScript para  insertar el mensaje de error.

Entrada de nombreDeUsuario

<!-- Entrada para nombre de Usuario -->
        
<div>
	<label for="nombreDeUsuario">Nombre de Usuario</label>
    <i class="fas fa-user"></i>
    
    <input
        type="text"
        name="username"
        id="Nombre-de-Usuario"
        placeholder="Joy Shaheb"
     />
    
    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>
    
    <div class="error"></div>
    
</div>

Entrada de correo electrónico

<!-- Entrada de Correo Electrónico -->
        
<div>
	<label for="correoElectronico">Correo Electrónico</label>
    <i class="far fa-envelope"></i>
    
    <input
        type="email"
        name="email"
        id="correo-electrónico"
        placeholder="abc@gmail.com"
     />
    
    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>
    
    <div class="error"></div>
    
</div>

Entrada Contraseña

<!--   Entrada de contraseña -->
        
<div>
	<label for="password">Contraseña</label>
    <i class="fas fa-lock"></i>
    
    <input
        type="password"
        name="password"
        id="contrasena"
        placeholder="Ingresar contraseña"
     />
    
    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>
    
    <div class="error"></div>
    
</div>

Como hacer un botón

Finalmente, agrega el botón antes del cierre de la etiqueta del formulario de la siguiente manera: 

<form>
    <!-- otro código aquí -->
    
    <button id="btn" type="submit">Enviar</button>
    
</form>

Aquí el resultado hasta ahora: ?

fdgdfgdfdffcvb
Result So far

Felicidades por completar la parte del HTML! ???

Frame-7

Como agregar el CSS

Frame-4

Vamos a agregar estilos con CSS a nuestro Formulario. Primero, eliminemos los estilos predeterminados de nuestro navegador incluyendo la fuente?

/**
* ! cambiando estilos predeterminados del navegador
**/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

Ahora, aplicaremos esos estilos a la etiqueta del formulario: 

/**
* ! reglas de estilo para la sección del formulario
**/

formulario {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 50px;
}

Posteriormente,  haremos los siguientes cambios para el título del texto: ??

.titulo {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}

Tu resultado hasta ahora??

fsdfsdsfxvxcvxd
Result so far

Ahora, agrega un margen al botón del texto de nuestra etiqueta label así:

label {
  display: block;
  margin-bottom: 5px;
}

Y agrega estos estilos para cambiar el aspecto de nuestras etiquetas input??

formulario div input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  outline: none;
  border: 2px solid #c4c4c4;
  padding: 0 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

Agrega este código para dar más espacio y efectos de cambio de color:

formulario div {
  position: relative;
  margin-bottom: 15px;
}

input:focus {
  border: 2px solid #f2796e;
}

El resultado hasta ahora ??

fdfdfdfdfvdfv
Result so far

Como dar Estilo a los iconos

Ahora le daremos estilo a los iconos que importamos de font-awesome. Sigue el código conmigo :✨✨

/**
* ! reglas de estilo para los iconos del formulario
**/

formulario div i {
  position: absolute;
  padding: 10px;
}

Aquí tenemos el resultado de agregar esas dos líneas??

fddfvdfvdfvgfbh
Result so far

Ahora, agrega estos estilos para dar estilo a la clase error,  junto con el icono de success y failure ??

.failure-icon,
.error {
  color: red;
}

.success-icon {
  color: green;
}

.error {
  font-size: 14.5px;
  margin-top: 5px;
}

Aquí el resultado hasta ahora??

ddsfsddsdscsfvv
Result so far

Mira, los iconos success y failure se superponen entre sí. No te preocupes, manipularemos eso con JavaScript. Por ahora, puedes esconderlos así??

.success-icon,
.failure-icon {
  right: 0;
  opacity: 0;
}

Ahora, vamos a dar estilo a nuestro botón de enviar, de esta manera ?

/* Reglas de estilo para botón enviar */

button {
  margin-top: 15px;
  width: 100%;
  height: 45px;
  background-color: #f2796e;
  border: 2px solid #f2796e;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

Si quieres agregar un efecto hover, entonces, agrega estos estilos ??

button:hover {
  opacity: 0.8;
}

¡Toma un descanso!

Hasta ahora todo muy bien. Toma un descanso – lo mereces.

Frame-33

Como agregar JavaScript

Frame-6

Primero, necesitamos apuntar a todas nuestras clases y  al id del HTML dentro del JavaScript. Para hacer esta tarea eficientemente, haz estas dos funciones ??

let id = (id) => document.getElementById(id);

let classes = (classes) => document.getElementsByClassName(classes);

Después,  guarda las clases y el id dentro de estas variables?

Nota: Trata de no cometer errores de ortografía. De lo contrario, tu JavaScript no funcionará.

let nombreDeUsuario = id("nombreDeUsuario"),
  email = id("email"),
  contrasena = id("contrasena"),
  formulario = id("formulario"),
  
  msjError = classes("error"),
  iconoExito = classes("success-icon"),
  failureIcon = classes("failure-icon");

Ahora, vamos a apuntar a nuestro formulario y agregar el event listener a enviar ?


form.addEventListener("enviar", (e) => {
  e.preventDefault();
});

Ahora, crearemos una función llamada motor  que hará todo el trabajo  de  validación de formularios para nosotros. Tendrá tres argumentos – sigue aquí: ?

let motor = (id, serial, mensaje) => {}

Los argumentos representan lo siguiente:

  • id va a apuntar a nuestro identificador
  • serial va a apuntar a todas nuestras clases[error class, success and failure icons]
  • mensaje  va a imprimir en mensaje dentro de nuestra clase .error

Ahora crea una sentencia  if, else así ?

let motor = (id, serial, mensaje) => {

  if (id.value.trim() === "") {
  } 
  
  else {
  }
}

Nota: id.value.trim() va a remover todos los espacios extra del valor que el usuario ingresa. Puedes darte una idea de como funciona analizando está ilustración ?

Frame-19-1
trim() used to remove extra spaces

Ahora, mira nuestros siguientes objetivos ?

  • Queremos que JavaScript imprima un mensaje dentro de la clase error cada que el usuario envié un formulario en blanco. Y al mismo tiempo, queremos que los iconos de failure resalten también.
  • Pero, si el usuario rellena todas las entradas y las envía, queremos que el botón de success se haga visible.

Para lograr esto, escribe esta lógica? para imprimir el mensaje:

let motor = (id, serial, mensaje) => {

  if (id.value.trim() === "") {
    msjError[serial].innerHTML = mensaje;
  } 
  
  else {
    msjError[serial].innerHTML = "";
  }
}

Para que los iconos funcionen correctamente, agrega este código: ??

let motor = (id, serial, mensaje) => {

  if (id.value.trim() === "") {
    msjError[serial].innerHTML = mensaje;
    id.style.border = "2px solid red";
    
    // iconos
    failureIcon[serial].style.opacity = "1";
    successIcon[serial].style.opacity = "0";
  } 
  
  else {
    msjError[serial].innerHTML = "";
    id.style.border = "2px solid green";
    
    // iconos
    failureIcon[serial].style.opacity = "0";
    successIcon[serial].style.opacity = "1";
  }
}

Es tiempo de implementar nuestra función recién creada. Escribe el siguiente código en el lugar donde agregamos el event listener de enviar  ?

form.addEventListener("enviar", (e) => {
  e.preventDefault();

  motor(nombreDeUsuario, 0, "El nombre de usuario no puede estar en blanco");
  motor(correoElectronico, 1, "El correo electrónico no puede estar en blanco");
  motor(contrasena, 2, "La contraseña no puede estar en blanco");
});

Aquí, pasamos los nombres de los id, las series de los nombres de nuestras clases de nombre y pasamos el mensaje que se debe imprimir cuando encontramos un error cuando el usuario envíe el formulario.

Aquí los resultados hasta ahora ?

El Resultado hasta ahora
The Result so far

Como agregar los botones de redes sociales

Frame-10

Todo bien hasta ahora, agreguemos las opciones de registro con redes sociales. Sigue los pasos aquí. ?

Dentro de la etiqueta del formulario, crea un nuevo div con el nombre de clase social:

<form id="formulario">

    <div class="social">
    
      <div class="titulo">Empieza ya</div>
      
      <div class="pregunta">
        Ya estás registrado? <br />
        <span>Registrate</span>
      </div>

      <div class="btn"></div>

      <div class="or">O</div>
    </div>
    
    <!-- otro código aquí-->
</form>

Dentro de la clase .btn, creamos dos divs más con los nombres de clase  .btn-1 y .btn-2  con las imágenes y el texto también.

<div class="btn">
  <div class="btn-1">
     <img src="https://img.icons8.com/color/30/000000/google-logo.png" />
     Registrate
  </div>
  
  <div class="btn-2">
    <img src="https://img.icons8.com/ios-filled/30/ffffff/facebook-new.png" />
     Registrate
   </div>
</div>

Así van nuestro resultado hasta ahora??

dfvgdfdsfdsf
The Result so far

Ahora, primero vamos a darle estilo a .btn-1 y .btn-2 .  Cambiaremos la alineación  de los botones a fila de columna?

/**
* ! reglas de estilo para la sección de redes sociales
**/

.btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 15px;
}

Así es como se vería ahora:

dfdfdfdbgf
The Result so far

Ahora, agrega estilos para el botón así: ?

.btn-1,
.btn-2 {
  padding: 10px 5px;
  width: 100%;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  border: 2px solid #c4c4c4;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

Cambia  el color del icono y el color del texto del  .btn-2 así: ?

.btn-2 {
  background-color: #4f70b5;
  color: white;
}

Después agrega estos pequeños cambios para que el componente se vea mejor:

.or {
  text-align: center;
}

.pregunta {
  font-size: 15px;
}

span {
  color: #f2796e;
  cursor: pointer;
}

El resultado hasta ahora luce así:

fdfhgnmhg
Result so far

Como agregar imágenes

Frame-9

Ahora, agregaremos imágenes a nuestro proyecto. Primero, escribiremos el HTML ?

<div class="container">

      <div class="contenido">
        <div class="logo">
          <img src="https://svgshare.com/i/_go.svg" alt="" />
        </div>
        
        <div class="imagen"></div>
        
        <div class="texto">
          Empieza gratis & obten <br />
          atractivas ofertas hoy !
        </div>  
      </div>
      
   <form id="formulario">
   <!--otro código aquí -->
   </form>
   
</div>

El resultado hasta ahora?

dfghgjgjgytfh
Result so far

Ahora necesitamos cambiar la orientación de nuestro contenido de columna a fila. Sigue los pasos a continuación ?

.container {
  display: flex;
  flex-direction: row;
}

Agrega estas reglas de estilo para la sección de contenido:

/**
* ! reglas de estilo  para la sección de contenido
**/

.contenido {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #f2796e;
  width: 55%;
  min-height: 100vh;
  padding: 10px 20px;
}

formulario {
   width: 45%;
   max-width: none;
}

El resultado hasta ahora ?

dsffgythjy
Result so far

Agrega la ilustración principal con CSS:

.imagen {
  background-image: url("https://svgshare.com/i/_gZ.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* border: 2px solid black; */
  height: 65%;
}

Y agrega estos estilos para la clase  .texto:

.texto {
  text-align: center;
  color: white;
  font-size: 18px;
}

formulario {
   width: 45%;
   max-width: none;
}

El Resultado hasta ahora ?

wewrwerew
Result so far

Como agregar Media Queries para la Versión Mobile

Frame-8

Queremos que nuestro formulario tenga un diseño responsivo. Así que agregaremos media queries para que nos ayuden a lograrlo.

Para pantallas con un ancho de 900 px,  vamos a agregar estos estilos. Sigue los pasos ??

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  formulario,
  .contenido {
    width: 100%;
  }

  .btn {
    flex-direction: column;
  }
  .imagen {
    height: 70vh;
  }
}

Para pantallas con un ancho de 425px, haremos estos cambios mínimos ?

@media (max-width: 425px) {
  formulario {
    padding: 20px;
  }
}

Este es el resultado final??

fgbgfnghnghnhgmjhgnmhgnhgnggfbgfgfb
The final result

Conclusión

Frame-5
Congratulations !

Felicidades por completar tu lectura de este tutorial. Ahora puedes fácil y eficientemente usar JavaScript para manejar validación de formularios. ¡Pero no solo eso, también tienes ya un proyecto listo para mostrar a tu reclutador local!

Aquí tienes tu medalla por leer hasta el final ❤️

Sugerencias y retroalimentación serán muy apreciadas ❤️

Alt Text