1

Buenas a tod@s de nuevo,

Esta vez tengo que hacer un formulario con una serie de mensajes de error cuando no se cumplen una serie de criterios de usuario y contraseña. El problema es que no sale nada por pantalla y creo que es debido a que en el atributo action de la etiqueta form no tiene una URL indicada como valor. Sin embargo, por lo que he visto en ejemplos y de acuerdo a la teoría, en principio se evalúan las condiciones indicadas antes de que se envíen los datos recogidos del formulario, por lo que la URL no sería necesaria.

Por ello y como no veo una solución posible al problema, pido vuestra ayuda, por si veis algún problema con el código. Adjunto tanto el html como el script por si acaso.

Muchas gracias por adelantado

P.D.1: He corregido algún error que había en los nombres de algunas variables

        function validar() {
          var okUsuario = validarUsuario();
          var okContrasena = validarContrasena();
          if (okUsuario && okContrasena) {
            return true;
          }

          return false;
        }

        function validarUsuario() {
          var ok;
          var msgError = '';
          var usuario = document.getElementById('usuario').value;
          var f1 = document.getElementById('f1');
          var entrada = document.getElementsByClassName('entrada')[0];

          f1.style.border = '';
          error.innerHTML = '';
          if (usuario.length == 0) {
            ok = false;
            msgError = 'Este campo no puede estar vacío';
          } else if (!(/^[a-z]+$/.test(usuario))) {
            ok = false;
            msgError = 'Este campo sólo admite texto compuesto exclusivamente por letras minúsculas';
          } else if ((usuario.length < 3) || (usuario.length >= 12)) {
            ok = false;
            msgError = 'Este campo sólo puede tener una longitud entre 3 y 12 caracteres';
          }

          if (!ok) {
            f1.style.border = '2px solid red';
            entrada.innerHTML = msgError;
            return false;
          }

          return true;
        }

        function validarContrasena() {
          var ok;
          var msgError = '';
          var contrasena = document.getElementById('contrasena').value;
          var f2 = document.getElementById('f2');
          var entrada = document.getElementsByClassName('entrada')[1];

          f2.style.border = '';
          error.innerHTML = '';
          if (contrasena.length == 0) {
            ok = false;
            msgError = 'Este campo no puede estar vacío';
          } else if (!(/^[A-Z]{1}[.,-]{1}[a-z0-9]{6}$/.test(contrasena))) {
            ok = false;
            msgError = 'Este campo sólo admite texto compuesto exclusivamente por 6 letras minúsculas y/o números';
          }

          if (!ok) {
            f2.style.border = '2px solid red';
            entrada.innerHTML = msgError;
            return false;
          }

          return true;
        }
<body>
    <div class="caja">
        <h1>Validar Formulario</h1>
    </div>
    <hr />
    <div class="caja">
        <h2>Datos de identificación</h2>
    </div>
    <div class="caja">
        <fieldset>
            <form action="" method="post" onsubmit="return validar ()">
                <div class="formulario" id="f1">
                    <label class="entrada">Usuario</label>
                    <input type="text" name="user" id="usuario">
                </div>
                <br />
                <div class="formulario" id="f2">
                    <label class="entrada">Contraseña</label>
                    <input type="password" name="password" id="contrasena">
                </div>
                <br />
                <div id="boton">
                    <input type="submit" name="enviar" value="Enviar">
                </div>
            </form>
        </fieldset>
    </div>
    <hr />
    </body>

12
  • 1
    El código javascript que utilizas ya da error de por si. Cópialo sin las etiquetas <script> y pégalo en este sitio: extendsclass.com/javascript-fiddle.html , y dale al botón Check Javascript Syntax para ver los errores. De sintaxis me muestra uno, pero de lógica me parece ver mas pues usas la variable usuario dentro de esa función sin haberlo definido antes me parece.
    – masterguru
    Commented el 27 dic. 2021 a las 15:34
  • 1
    Hola! Gracias por la recomendación de la web. No sabía que existía y es muy útil. Respecto al error de sintaxis, es cierto, pero me hago un lío con las expresiones regulares cuando tengo que poner varias. Lo que pretendo poner como condición es que la contraseña esté formada por una letra mayúscula al comienzo, seguido de un punto, una coma o un guión simple, y luego 6 caracteres que pueden ser letras minúsculas o números. Respecto al error de lógica, había copiado y pegado la estructura condicional y había olvidado modificar la variable que se estaba evaluando. Muchas gracias!
    – dancareli
    Commented el 27 dic. 2021 a las 15:44
  • Ademas de darte error el js por si solo bro, parece que llamas la primera funcion pero las demas no, deberias invocar tus otras 2 funciones dentro de la primera si quieres que se ejecuten o te muestre algo.
    – Mateo Guio
    Commented el 27 dic. 2021 a las 15:44
  • Hola! Lo que comentas es lo que pretendo con este fragmento del código: function validar() { var okUsuario = validarUsuario(); var okContrasena = validarContrasena(); if (okUsuario && okContrasena) { return true; } En esta parte invoco a las dos funciones para que si son ciertas, el formulario se envíe, y si no lo son, que arroje algún mensaje de error. O al menos, es lo que pretendo que haga el código, pero ya digo que voy perdido con esto
    – dancareli
    Commented el 27 dic. 2021 a las 15:51
  • Si te gustó esa web esta te va a encantar porque puedes probarlo insitu: jsfiddle.net . Coges, pegas el html en su area correspondiente, lo mismo con el javascript (sin las etiquetas <script>) y le das al botón RUN y vas probando
    – masterguru
    Commented el 27 dic. 2021 a las 15:53

2 respuestas 2

1

Bien, principalmente tienes que acomodar algunas cuestiones de tu código:

  • Para prevenir el submit del formulario debes hacer event.preventDefault() al llamar a la función. Sino la página intentará redirigirte.

  • Evita el uso de var. No solo el alcance es confuso sino que en tu código estarías declarando varias veces la misma variable aunque claramente para ti son distintas (en el alcande de tus funciones) https://empleosti.com.mx/blog/4-practicas-debes-evitar-javascript/

  • Evita el uso de innerHtml, utiliza textContent.

Cambia el

<form action="" method="post" onsubmit="return validar ()">

por

<form action="" method="post" onsubmit="validar(event);">

Agrega condiciones para cuando no hay error de validación:

if (!ok) {
    f1.style.border = '2px solid red';
    erroruser.textContent = msgError;
    return false;
} else {
    f1.style.border = '0px';
    erroruser.textContent = '';
    return true;
}

Fiddle funcionando: https://jsfiddle.net/szyjmw84/1/

1
  • Hola Marcelo. He tomado nota de las recomendaciones que me has hecho y parece que todo funciona correctamente ahora. Muchísimas gracias
    – dancareli
    Commented el 27 dic. 2021 a las 18:30
0

Creo que esto podría ayudarte a encontrar el problema, habían varias cosas para arreglar, te dejo ejemplo de HTML y JS.

HTML:

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
</head>
<body>
    <div class="caja">
        <h1>Validar Formulario</h1>
    </div>
    <hr />
    <div class="caja">
        <h2>Datos de identificación</h2>
    </div>
    <div class="caja">
        <fieldset>
            <form action="/login" method="post" id="myForm" onsubmit="validar(event)">
                <div class="formulario" id="f1">
                    <label for="usuario" class="entrada">Usuario</label>
                    <input type="text" name="usuario" id="usuario">
                </div>
                <br />
                <div class="formulario" id="f2">
                    <label for="contrasena" class="entrada">Contraseña</label>
                    <input type="text" name="contrasena" id="contrasena">
                </div>
                <br />
                <div id="boton">
                    <input type="submit" name="enviar" value="Enviar">
                </div>
            </form>
        </fieldset>
    </div>
    <hr />
    <div id="error"></div>
    <script src="app.js"></script>
</body>
</html>

JavaScript (Lo puse en un archivo a parte llamado app.js en la misma carpeta que el html lo estoy importando en el html antes de cerrar el body):

// Capturo todos los elementos que voy a reutilizar
var myForm = document.getElementById("myForm");
var f1 = document.getElementById("f1");
var f2 = document.getElementById("f2");
var inputUsuario = document.getElementById("usuario");
var inputContrasena = document.getElementById("contrasena");
var error = document.getElementById("error");
var msgError = "";

//Capturo evento input, para que cuando se ponga rojo, si se escribe nuevamente se quite el rojo
inputUsuario.addEventListener("input", () => {
  error.innerHTML = "";
  f1.style.border = "";
});

inputContrasena.addEventListener("input", () => {
  error.innerHTML = "";
  f2.style.border = "";
});

function validar(event) {
  event.preventDefault();
  var ok = false;
  var okUsuario = validarUsuario();
  var okContrasena = validarContrasena();
  if (okUsuario && okContrasena) {
    myForm.submit() //Si se cumplió todo lo anterior hace el submit.
  }
  
}

function validarUsuario() {
  var usuario = inputUsuario.value;
  var ok = true;

  f1.style.border = "";
  error.innerHTML = "";
  if (usuario === "") {
    ok = false;
    msgError = "Este campo no puede estar vacío";
  } else if (usuario !== "Luis") {
    ok = false;
    msgError =
      "Este campo sólo admite texto compuesto exclusivamente por letras minúsculas";
  } else if (usuario.length < 3 || usuario.length >= 12) {
    ok = false;
    msgError =
      "Este campo sólo puede tener una longitud entre 3 y 12 caracteres";
  }

  if (!ok) {
    f1.style.border = "2px solid red";
    error.innerHTML = msgError;
    return false;
  }
  return ok;
}

function validarContrasena() {
  var contrasena = inputContrasena.value;
  var ok = true;

  f2.style.border = "";
  error.innerHTML = "";
  if (contrasena === "") {
    ok = false;
    msgError = "Este campo no puede estar vacío";
  } else if (contrasena !== "Clave") {
    ok = false;
    msgError =
      "Este campo sólo admite texto compuesto exclusivamente por 6 letras minúsculas y/o números";
  }

  if (!ok) {
    f2.style.border = "2px solid red";
    error.innerHTML = msgError;
    return false;
  }
  return ok;
}

Este código está funcionando y hace el submit del formulario solo si se cumplen ambas validaciones, también tenías varios problemas de referencias y faltaban elementos, las expresiones regulares tendrías que revisarlas, por el momento, los puse como string nomás, usuario "Luis", contraseña "Clave". Con esas credenciales pasa, tenés que chequear esos if para poner lo que desees que se cumpla nada más. También agregué 2 eventListeners para que si se pone en rojo un campo por la validación, al volver a escribir en el se vaya el color rojo y agregué un preventDefault() en la función validar para que no se recargue la página.

Quedo a las órdenes.

2
  • Hola Luis. Muchísimas gracias por las molestias que te has tomado. He realizado los cambios que has propuesto y todo funciona correctamente, así que de nuevo gracias :)
    – dancareli
    Commented el 27 dic. 2021 a las 18:31
  • Hola!, me alegro mucho, estoy a las órdenes. Commented el 27 dic. 2021 a las 18:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.