0

Este es un fragmento de mi HTML donde se muestra las clases bootstrap que estoy utilizando.

<form action="#" class="needs-validation" id="formulario">
<div class="form-group" id="group__email">
<div class="mb-2">
<input type="email" placeholder="Email" class="form-control py-2.5" name="email" id="email">
<div class="valid-feedback">Valid data.</div>
<div class="invalid-feedback">Mail required</div>
</div>
</div>

Para la validación pretendo añadir y remover las clases de valid-feedback e invalid-feedback de bootstrap pero no me las toma porque al ingresar los datos en input se elimina, todo funciona correctamente hasta que ingreso las clases valid-feedback e invalid-feedback

const formulario = document.getElementById("formulario");
const inputs = document.querySelectorAll("#formulario input");

const expresiones = {
correo: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
contraseña: /^(?=\w*\d)(?=\w*[A-Z])(?=\w*[a-z])\S{8,16}$/,
}

const validarFormulario = (e) =>{
    switch (e.target.name){
        case "email":
            if(expresiones.correo.test(e.target.value)){
                document.getElementById("group__email").classList.remove("invalid-feedback");
                document.getElementById("group__email").classList.add("valid-feedback");

            } else{
                document.getElementById("group__email").classList.add("invalid-feedback");
            }
        break;
    }
}

inputs.forEach((input) => {
input.addEventListener("keyup", validarFormulario);
input.addEventListener("blur", validarFormulario);
});

formulario.addEventListener("submit", (e)=> {
e.preventDefault();
});
3
  • hola diana, bienvenida a stackoverflow..!
    – Enzo
    el 18 mar. 2021 a las 2:08
  • las etiquetas div con las clases valid-feedback y valid-feedback están inicializadas de esa manera o las insertas al html mediante js?
    – Enzo
    el 18 mar. 2021 a las 2:09
  • Están inicializadas de esa manera :) el 18 mar. 2021 a las 2:29

2 respuestas 2

3

Edit:

Para validar los checkbox tienes que agregar un poco más de lógica para saber si existe al menos un checkbox seleccionado. La explicación de esa parte está dentro del código, pero básicamente es mirar la propiedad checked propia de los checkbox. Otro punto a tomar en cuenta es que los checkbox no tienen un evento keyup, por lo que para evitar agregar otro listener, puedes cambiar el listener del evento blur por change.

Como ya mencionó el compañero @usiel-rivas, las clases valid-feedback e invalid-feedback tienen la propiedad display: none por defecto. Por lo que solo basta con cambiar eso por display: block.

Una forma de hacer un poco más genérica la función de validarFormulario y que puedas aplicar el mismo principio a cada elemento dentro del formulario, es crear solo un div para cada elemento con algún prefijo o sufijo que te guste (algo similar a lo que haces con los grupos). En este caso utilizo un sufijo Mensaje para formar un id elementoMensaje. Luego de ello, puedes simplificar los casos y hacer las "operaciones" con las clases hasta el final del switch.

Algo como lo siguiente:

const formulario = document.querySelector('form');
const inputs = document.querySelectorAll('#formulario input');

const expresiones = {
  correo: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
  contrasena: /^(?=\w*\d)(?=\w*[A-Z])(?=\w*[a-z])\S{8,16}$/,
  telefono: /^\d+$/
};

const validarFormulario = (e) => {
  let name = e.target.name; // Recuerda colocar un `name` para cada input
  let valor = e.target.value;
  let mensaje = document.getElementById(`${name}Mensaje`); // div con un `id` 'nameSufijo'
  // let grupo = document.getElementById(`group__${name}`); // Similar a lo del div
  let clase; // Clase que será asignada después de la evaluación
  let textoMensaje; // Aqui pondrás el mensaje después de la evaluación
  
  // Solo validar si hay contenido en el input
  if (valor === '') return;
  
  switch (e.target.name) {
    case 'email':
      if (expresiones.correo.test(valor)) {
        textoMensaje = 'Correo Válido';
        clase = 'valid-feedback';
      } else {
        textoMensaje = 'Correo Inválido';
        clase = 'invalid-feedback';
      }
      break;
    // Caso prueba
    case 'telefono':
      if (expresiones.telefono.test(valor)) {
        textoMensaje = 'Teléfono Válido';
        clase = 'valid-feedback';
      } else {
        textoMensaje = 'Teléfono Inválido';
        clase = 'invalid-feedback';
      }
      break;
    case 'opcion':
      // De adentro hacia afuera: Primero obtenemos todos los elementos
      // cuyo nombre sea el mismo al que estamos evaluando (fíjate que
      // todos los check comparten el mismo nombre pero NO el mismo id).
      // Luego convertumos ese array de elementos a un array "normal"
      // para poder hacer uso de some. Con some, simplemente verficamos
      // que exista al menos un elemento con la propiedad checked = true.
      // De no ser así, some devolverá false.
      let chequeado = Array.from(document.getElementsByName('opcion')).some(el => el.checked);
      
      if (chequeado) {
        textoMensaje = 'Correcto';
        clase = 'valid-feedback';
      } else {
        textoMensaje = 'Seleccione al menos una Opción';
        clase = 'invalid-feedback';
      }
      break;
    default:
      break;
  }
  
  // Realizar el cambio de clases y asignación de mensaje solo una vez
  mensaje.classList.remove(...mensaje.classList); // Elimina todas las clases al grupo
  mensaje.classList.add(clase); // Agrega la clase resultado de la validación
  mensaje.innerText = textoMensaje; // Establece el mensaje resultado de la validación
  mensaje.style.display = 'block'; // 'Mostrar' el elemento
};

formulario.addEventListener('submit', (event) => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
  return false;
});

inputs.forEach((input) => {
  input.addEventListener('keyup', validarFormulario);
  input.addEventListener('change', validarFormulario);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<form action="#" class="needs-validation" id="formulario">
  <div class="form-group" id="group__email">
    <div class="mb-2">
      <input type="email" placeholder="Email" class="form-control py-2.5" name="email" id="email">
      <div id="emailMensaje"></div>
    </div>
  </div>
  <div class="form-group" id="group__telefono">
    <div class="mb-2">
      <input type="text" placeholder="Telefono" class="form-control py-2.5" name="telefono" id="telefono">
      <div id="telefonoMensaje"></div>
    </div>
  </div>
  <div class="form-group" id="group__opcion">
    <div class="mb-2">
      <label for="opcion1"><input type="checkbox" class="form-control" name="opcion" id="opcion1">Opcion 1</label>
      <label for="opcion2"><input type="checkbox" class="form-control" name="opcion" id="opcion2">Opcion 2</label>
      <label for="opcion3"><input type="checkbox" class="form-control" name="opcion" id="opcion3">Opcion 3</label>
      <div id="opcionMensaje"></div>
    </div>
  </div>
</form>

Como ves, ahora es más sencillo agregar más casos de validación, en el ejemplo agregué uns simple validación para teléfono en el que si colocas otra cosa distinta a un número, será un teléfono inválido.

Claro, es solo un caso hipotético, puedes hacer la validación tan compleja o tan sencilla como sea necesario y dependiendo del resultado asignar los valores a mensajeTexto y clase. Incluso podrías factorizar aún más ese proceso de asignación, pero eso podrías hacerlo más adelante cuando te des cuenta de las cosas que se repiten.

Por último, ¡bienvenida a SO!

4
  • Hola! muchas gracias me sirvió mucho tu método; también tengo un checkbox sabes como podría validarlo? lo intenté con el método que mencionas pero solo con el checkbox no me funciona :( el 19 mar. 2021 a las 15:22
  • Claro, mira mi edit. También podrías considerar cambiar la forma en la que validas el formulario, podrías delegar toda la validación a un solo botón en lugar de a cada elemento del formulario. Para ello tendrías que cambiar un poco la lógica para obtener la información de todo el formulario, tal vez serializandolo. Esto con la finalidad de mejorar el rendimiento, pero eso ya te tocará a tí si es que lo necesitas. el 20 mar. 2021 a las 1:57
  • Gracias! me ayudó bastante :) el 23 mar. 2021 a las 0:54
  • Por nada, un gusto poder ayudarte. el 23 mar. 2021 a las 1:45
-2

 const formulario = document.getElementById("formulario");
const inputs = document.querySelectorAll("#formulario input");

const expresiones = {
correo: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
contraseña: /^(?=\w*\d)(?=\w*[A-Z])(?=\w*[a-z])\S{8,16}$/,
}

const validarFormulario = (e) =>{
    switch (e.target.name){
        case "email":
            if(expresiones.correo.test(e.target.value)){
                
                document.getElementsByClassName("valid-feedback")[0].style.display="block";
                document.getElementsByClassName("invalid-feedback")[0].style.display="none";

            } else{
                document.getElementsByClassName("invalid-feedback")[0].style.display="block";
                document.getElementsByClassName("valid-feedback")[0].style.display="none";
            }
        break;
    }
}

inputs.forEach((input) => {
input.addEventListener("keyup", validarFormulario);
input.addEventListener("blur", validarFormulario);
});

formulario.addEventListener("submit", (e)=> {
e.preventDefault();
});
<!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>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

</head>
<body>
    <form action="#" class="needs-validation" id="formulario">
        <div class="form-group" id="group__email">
        <div class="mb-2">
        <input type="email" placeholder="Email" class="form-control py-2.5" name="email" id="email">
        <div class="valid-feedback">Valid data.</div>
        <div class="invalid-feedback">Mail required</div>
        </div>
        </div>
</body>
</html>

Espero que este codigo sirva de ayuda.

6
  • 1
    podrías explicar que es lo que cambiaste del código original? puede que para ti sea sencillo pero para algunos no lo entenderían
    – Enzo
    el 18 mar. 2021 a las 2:18
  • Las clases valid-feedback y invalid-feedback tienen propiedades display:none por defecto, por lo tanto estan invisbles y no muestran el contenido del div. En este punto entra en juego el JavaScript para hacer visible el div correspondiente segun el valor del input.
    – Usiel
    el 18 mar. 2021 a las 2:25
  • 1
    faltan argumentos a tu respuesta, como por ejemplo, que cambios realizaste en el codigo para que funcione como el OP queria? que diferencias hay sobre tu codigo y el codigo del OP ?
    – Enzo
    el 18 mar. 2021 a las 2:30
  • En el codigo principal se agregaban las clases de validacion al div con id group__email, las clases de manera automatica aplicaban la propiedad display: none a todos los elementos dentro del div. Por lo tanto desaparecia el input, pues este estaba dentro del div con id group_email. Para resoverlo agrege dentro del condicional If un selector getElementByClassName para los div con las clases de validacion y use 'style.display="block"' para mostrar los div ocultos si la condicion es verdadera o biceversa.
    – Usiel
    el 18 mar. 2021 a las 2:40
  • Hola @Usiel, tenias razón!! si era el display:block lo que me faltaba... muchas gracias por tu ayuda :) el 19 mar. 2021 a las 15:26

Tu Respuesta

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

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