0

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.

  1. 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.

  2. Me gustaría saber como puedo darle algo flotante al mensaje de error como el tooltips de bootstrap 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>

1 respuesta 1

0

Si tu quieres validaciones flotantes, creo que lo mejor es usar las validaciones nativas que justamente elevan un popup.

En tu caso solo necesitas usar:

  • Atributo required: Para establecer que el input es obligatorio
  • type="email": Para obligar al input a solo aceptar el correo. Un correo valido puede ser sin punto nombre@dominio, si necesitas algo como [email protected], puedes usar:
  • el atributo pattern que te permite una validación con expresiones regualares.

Por último puedes dar estilo CSS utilizando:

  • :invalid
  • :valid
  • :user-invalid
  • :required
  • :out-of-range

input:user-invalid, textarea:user-invalid{
  border:1px solid red;
}
<form id="form" class="mx-auto">
  <input type="text" class="form-control" id="itNombre" placeholder="Nombre*" name="nombre" required>
  <input type="email" class="form-control" id="itEmail" placeholder="Email*" name="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,63}$" required>
  <textarea type="text" class="form-control" id="itMensaje" placeholder="Mensaje*" name="mensaje"  required></textarea>
  <button type="submit" id="btn-enviar">ENVIAR</button>

</form>

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.