Validación básica de formularios en JavaScript

En el pasado, la validación del formulario ocurría en el servidor, después de que una persona ya había ingresado toda su información y presionado el botón de enviar.

Si la información era incorrecta o faltaba, el servidor tendría que devolver todo con un mensaje indicándole a la persona que corrija el formulario antes de enviarlo nuevamente.

Este fue un proceso largo y supondría una gran carga para el servidor.

En estos días, JavaScript proporciona varias formas de validar los datos de un formulario directamente en el navegador antes de enviarlo al servidor.

Aquí está el código HTML que usaremos en los siguientes ejemplos:

  Form Validation  // Form validation will go here     
    
Username
Email Address

Validación básica

Este tipo de validación implica verificar todos los campos obligatorios y asegurarse de que estén correctamente completados.

Aquí hay un ejemplo básico de una función validateque muestra una alerta si las entradas del nombre de usuario y la dirección de correo electrónico están en blanco; de lo contrario, devuelve verdadero:

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } return true; } submitBtn.addEventListener('click', validate); 

Pero, ¿qué pasa si alguien ingresa un texto aleatorio como su dirección de correo electrónico? Actualmente, la validatefunción seguirá siendo verdadera. Como puede imaginar, enviar datos incorrectos al servidor puede generar problemas.

Ahí es donde entra en juego la validación del formato de datos.

Validación del formato de datos

Este tipo de validación en realidad analiza los valores del formulario y verifica que sean correctos.

Validar las direcciones de correo electrónico es muy difícil: hay una gran cantidad de direcciones de correo electrónico y hosts legítimos, y es imposible adivinar todas las combinaciones válidas de caracteres.

Dicho esto, hay algunos factores clave que son comunes en todas las direcciones de correo electrónico válidas:

  • Una dirección debe contener un carácter @ y al menos un punto (.)
  • El carácter @ no puede ser el primer carácter de la dirección.
  • Los . debe venir al menos un carácter después del carácter @

Con esto en mente, tal vez los desarrolladores usen expresiones regulares para determinar si una dirección de correo electrónico es válida o no. Aquí hay una función que Tyler McGinnis recomienda en su blog:

const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } emailIsValid('[email protected]@camp.org') // false emailIsValid('[email protected]') // true

Agregado al código del último ejemplo, se verá así:

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } if (!emailIsValid(emailAddress.value)) { alert("Please enter a valid email address."); emailAddress.focus(); return false; } return true; // Can submit the form data to the server } const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } submitBtn.addEventListener('click', validate); 

Restricciones de formulario HTML5

Algunas de las limitaciones HTML5 comúnmente utilizados para son el typeatributo (por ejemplo type="password"), maxlength, requiredy disabled.

Una restricción que se usa con menos frecuencia es el patternatributo que toma una expresión regular de JavaScript.

Más información

  • Validación de datos de formulario | MDN
  • Validación de restricciones | MDN