Validar formularios en JavaScript

Validar formulario con JavaScript y HTML

En este post te enseñaré a validar formularios HTML usando JavaScript nativo o JS puro, sin usar frameworks ni librerías externas.

Validar formulario con JavaScript y HTML

De este modo vas a poder comprobar si un formulario se envía dependiendo de los valores que el usuario haya colocado. Te enseñaré un ejemplo para que veas cómo validar un formulario en JavaScript apoyándote además de la validación nativa de HTML.

Solo recuerda que la validación del lado del cliente se hace por mera decoración, y no por seguridad; ya que la seguridad se aplica en el lado del servidor.

Conceptos básicos de la validación

Lo que debemos hacer es obtener una referencia al elemento DOM del formulario en sí y escuchar el evento submit, que es cuando se envía el formulario. Este evento será llamado solo si el mismo es válido según las reglas HTML.

Adicional a las reglas de validación (como required, min, etcétera) podemos aplicar una validación personalizada. Para ello detenemos el envío del formulario con preventDefault, comprobamos que todo esté correcto y luego invocamos a submit.

Verás que es muy fácil con los ejemplos.

Preparando el formulario

Veamos el código HTML. Fíjate en el id que tiene el form y cada input.

<form action="procesar.html" id="formulario">
    <div class="form-group">
        <input name="nombre" required id="nombre" type="text" class="form-control" placeholder="Nombre">
    </div>
    <div class="form-group">
        <input name="correo" required id="correo" type="email" class="form-control"
            placeholder="Correo">
    </div>
    <button class="btn btn-success">Enviar</button>
</form>

También nota que ambos campos tienen el atributo required. Esto nos ahorra validación pues cuando el formulario sea enviado sabremos que los campos están llenos.

Script de JavaScript

Ahora obtenemos referencias a los elementos con JS (usando querySelector) y escuchamos el envío del formulario. Tan pronto el mismo sea enviado, vamos a detener su comportamiento con preventDefault.

// Obtener referencias 
const $formulario = document.querySelector("#formulario"),
    $nombre = document.querySelector("#nombre"),
    $correo = document.querySelector("#correo");
$formulario.onsubmit = evento => {
    evento.preventDefault();
    // Aquí validar
};

Ahora realizamos la validación dentro de la línea 7. Recuerda que ya tenemos una referencia al campo de nombre en $nombre, y una al correo con $correo.

Validando

// Obtener referencias 
const $formulario = document.querySelector("#formulario"),
    $nombre = document.querySelector("#nombre"),
    $correo = document.querySelector("#correo");
$formulario.onsubmit = evento => {
    evento.preventDefault();
    const nombre = $nombre.value,
        correo = $correo.value;
    // Validar
    if (nombre === "Luis" || nombre === "José") {
        alert("No pueden ser esos nombres");
        return;
    }
    if (correo.endsWith("@hotmail.com")) {
        alert("No puede ser de hotmail");
        return;
    }
    $formulario.submit();
};

Aquí estoy poniendo una validación simple de que el nombre no puede ser Luis ni José en la línea 10, y si ese es el caso, muestro una alerta en la línea 11 además de detener la ejecución con el return de la 12.

Por otro lado, el correo no puede ser de hotmail como se ve en la línea 14. Por cierto, en lugar de un simple alert puedes usar una alerta de Sweet Alert 2.

Lo importante es que si quieres enviar el formulario debes invocar a $formulario.submit(), solo en caso de que quieras que se envíe. En caso de que no, coloca un return dentro de la función para que nunca llegues a ese fragmento de código, o coloca el envío en el else.

Poniendo todo junto

El código completo queda así, incluyendo el formulario HTML y el código de JavaScript.

<!doctype html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Plantilla básica para Bootstrap">
    <meta name="author" content="Parzibyte">
    <title>Validar formularios con JavaScript - By Parzibyte</title>
    <!-- Cargar el CSS de Boostrap-->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Cargar estilos propios -->
    <link href="style.css" rel="stylesheet">
</head>

<body>

    <main role="main" class="container">
        <div class="row">
            <!-- Aquí pon las col-x necesarias, comienza tu contenido, etcétera -->
            <div class="col-12">
                <h1>Validación de formularios con JavaScript</h1>
                <a href="//parzibyte.me/blog" target="_blank">By Parzibyte</a>
                <br>
                <form action="procesar.html" id="formulario">
                    <div class="form-group">
                        <input name="nombre" required id="nombre" type="text" class="form-control" placeholder="Nombre">
                    </div>
                    <div class="form-group">
                        <input name="correo" required id="correo" type="email" class="form-control"
                            placeholder="Correo">
                    </div>
                    <button class="btn btn-success">Enviar</button>
                </form>
            </div>
        </div>
    </main>
    <script>
        // Obtener referencias 
        const $formulario = document.querySelector("#formulario"),
            $nombre = document.querySelector("#nombre"),
            $correo = document.querySelector("#correo");
        $formulario.onsubmit = evento => {
            evento.preventDefault();
            const nombre = $nombre.value,
                correo = $correo.value;
            // Validar
            if (nombre === "Luis" || nombre === "José") {
                alert("No pueden ser esos nombres");
                return;
            }
            if (correo.endsWith("@hotmail.com")) {
                alert("No puede ser de hotmail");
                return;
            }
            $formulario.submit();
        };
    </script>

</body>

</html>

Si quieres puedes probarlo en este enlace. También puedes aprender más sobre JavaScript en mi blog.

He subido un vídeo a YouTube explicando lo del post:

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/