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!
valid-feedback
yvalid-feedback
están inicializadas de esa manera o las insertas al html mediante js?