Tengo un formulario el cual tengo que realizar las validaciones en cada campo o input
lo tengo ya casi logrado, pero hay algunos detalles que me percate al momento de realizar las pruebas y vi que no esta al 100% todavía es por eso que acudí a esta comunidad para el apoyo, voy en listar los detalles que tengo.
Al momento de validar un campo ya sea vació o con alguna expresión regular, si es correcto el dato ingresado entonces quiero pasar al siguiente campo y que se desmarque el error sin estar dando clic al botón
submit
.Me gustaría saber como puedo darle algo flotante al mensaje de error como el
tooltips
debootstrap
para que no afecte el diseño, eso ya es algo a consideración no importa tanto.
h1 {
text-align: center;
}
#form {
width:50%;
}
#form .form-control {
margin-top: 25px;
margin-bottom: 10px;
}
.form-cont.success input{
border-bottom: solid #01BF9B;
}
.form-cont.error input{
border-bottom: solid #bf0101;
}
.form-cont small{
color: #ffff;
position: absolute;
margin-top: -12px;
visibility: hidden;
background: #bf0101;
}
.form-cont.error small{
visibility: visible;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<title>Bootstrap demo</title>
</head>
<body>
<h1>FORMULARIO DE CONTACTO</h1>
<!-- FORMULARIO DE CONTACTO-->
<form id="form" class="mx-auto">
<div class="col-auto form-cont">
<input type="text" class="form-control" id="itNombre" placeholder="Nombre*" name="nombre">
<small>Error message</small>
</div>
<div class="col-auto form-cont">
<input type="text" class="form-control" id="itEmail" placeholder="Email*" name="email">
<small>Error message</small>
</div>
<div class="col-auto form-cont">
<textarea type="text" class="form-control" id="itMensaje" placeholder="Mensaje*" name="mensaje"></textarea>
<small>Error message</small>
</div>
<div class="col-auto">
<button type="submit" id="btn-enviar" class="btn btn-primary mb-3" onclick="checkInputs();">ENVIAR</button>
</div>
</form>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<script>
const form = document.getElementById('form');
const nombre = document.getElementById('itNombre');
const email = document.getElementById('itEmail');
const mensaje = document.getElementById('itMensaje');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
/* METODO PARA VALIDAR LOS INPUTS*/
function checkInputs(){
const nombreValue = nombre.value.trim();
const emailValue = email.value.trim();
const mensajeValue = mensaje.value.trim();
if (nombreValue =='') {
setErrorFor(nombre, '¡Favor de llenar el campo Nombre!');
}else{
setSuccessFor(nombre);
}
if (emailValue =='') {
setErrorFor(email, '¡Favor de llenar el campo Email!');
} else if (!isEmail(emailValue)) {
setErrorFor(email, '¡Favor de validar!');
} else {
setSuccessFor(email);
}
if (mensajeValue =='') {
setErrorFor(mensaje, '¡Favor de llenar el campo Mensaje!');
} else{
setSuccessFor(mensaje);
}
}
/* METODO PARA EJCUTAR LOS ERRORES*/
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-cont error';
small.innerText = message;
}
/* METODO PARA VALIDAR CON EXITO */
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-cont success';
}
function isEmail(email) {
return /^\w+([.-_+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/.test(email);
}
</script>