Inicio
Blog
Validación de formulario con JavaScript

Validación de formulario con JavaScript 2023

Contenido ocultar
1 Validación de formulario con JavaScript forma básica
2 Estructura de nuestro formulario con HTML
3 Estilos con CSS para el formulario
4 Validacion en JavaScript

Validación de formulario con JavaScript forma básica

En el pasado, una vez que alguien había introducido toda su información y pulsado el botón de enviar, la validación de los formularios tenía lugar en el servidor.

Si faltaba algún dato o era inexacto, el servidor tenía que enviar toda la solicitud hacia atrás junto con un mensaje en el que se indicaba al destinatario que modificara primero el formulario antes de volver a enviarlo.

Era un proceso interminable que suponía una gran carga para el servidor.

Hoy en día, JavaScript ofrece diversos métodos para validar los datos de los formularios en el navegador antes de enviarlos al servidor la mejor manera es utilizar expresiones regulares, pero en este articulo veras una validación Básica de Formularios, para que puedas tener idea de como lo aplicarías en un proyecto simple.

Estructura de nuestro formulario con HTML

Para crear una validación de formulario con JavaScript, primero creamos la estructura de nuestro proyecto en el archivo index.html con un formulario sencillo y también haciendo referencia a nuestro archivo de JS y CSS

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Validaciones en JavaScript</title>
</head>

<body>

    <div class="container">
        <h2>BIENVENIDO</h2>
        <form id="formulario">
            <input type="text" id="usuario" placeholder="Nombre de Usuario">
            <input type="password" id="password" placeholder="Contraseña">
            <button type="submit" class="boton">Iniciar Sesión</button>
        </form>
    </div>

    <script src="app.js"></script>
</body>
</html>

Estilos con CSS para el formulario

Luego te dejo aquí unos estilos sencillos para que tenga un diseño agradable nuestro formulario para eso creamos un archivo con el nombre de style.css

body {
    background-image: linear-gradient(to right, rgb(20, 32, 48), rgb(13, 24, 38));
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
    color: #6c5ce7;
    text-align: center;
    text-transform: uppercase;
    font-size: 60px;
}

.container {
    width: 400px;
    margin: 50px auto 0;
    padding: 15px;
    border-radius: 8px;
    background-color: #fff;
}

.container h2 {
    text-align: center;
    text-transform: uppercase;
    color: rgb(24, 32, 47);
}

form {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
}

input {
    padding: 10px;
    border: 1px solid rgba(102, 131, 140, 0.139);
    border-radius: 5px;

}

input:focus {
    outline: none;
    border-bottom: 2px solid #6c5ce7;
}

.boton {
    border: none;
    background-color: #6c5ce7;
    padding: 10px;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
}

.alerta {
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

.error {
    background-color: rgb(255, 0, 93);
}

.exito {
    background-color: rgb(27, 122, 46);
}

Validacion en JavaScript

Y por último creamos la lógica de nuestro proyecto y para eso utilizamos JavaScript, entonces procedemos a crear nuestro archivo con el nombre de app.js

const formulario = document.querySelector('#formulario')

//evento
formulario.addEventListener("submit", validarFormulario);


//funcion validar el formulario al dar submit
function validarFormulario(e) {
    e.preventDefault();

    //ver los valores de los inputs
    const usuario = document.querySelector("#usuario").value
    const password = document.querySelector("#password").value

     // Lógica para validacion en JavaScript
    if (usuario == '' || password == "") {
        mostrarAlerta('Complete los campos', 'error');
    } else {
        if (password == '12345' && usuario == 'digitalnest') {
            mostrarAlerta('cargando...', 'exito');
            setTimeout(() => {
                window.location.href = "./paginaInicio.html"
            }, 2000);
            return
        }
        mostrarAlerta('Datos incorrectos', 'error');
    }
}

//Mostrar la alerta cuando agregamos datos incorrectos o vacíos
function mostrarAlerta(mensaje, tipo) {
    const alerta = document.createElement('div');
    alerta.className = `alerta ${tipo}`
    alerta.textContent = mensaje

    formulario.appendChild(alerta);
    setTimeout(() => {
        alerta.remove();
    }, 2000)
}

El resultado de este formulario básico con HTML, CSS y JavaScript seria el siguiente:

validar formularios con JavaScript

La validación de formularios en JavaScript es esencial para evitar el envío de datos incorrectos y asegurar la calidad de los datos recibidos. Con la verificación en tiempo real, es posible aplicar reglas de validación específicas a cada campo del formulario y mostrar mensajes de error claros y personalizados en caso de que los datos introducidos no cumplan con las condiciones requeridas como te muestro en el ejemplo prebio. La validación de correo electrónico y contraseñas también es importante para garantizar la seguridad de los datos del usuario. Al utilizar JavaScript y HTML juntos, es posible crear formularios eficientes y de fácil uso para los visitantes de un sitio web.

Espero que te sea de utilidad este articulo y si quieres aprender mas sobre JavaScript y otras tecnologías te dejo nuestra sección de PROGRAMACIÓN

Entradas relacionadas