4

Estoy buscando la forma de validar un <input> que a medida que voy escribiendo en él me valide la longitud de los caracteres sin tener que pulsar un botón.

Tengo el código hecho, en HTML/CSS, y el problema es que siempre me lo pone por defecto en rojo y la idea es que mientras voy escribiendo coloque por debajo del <input> vaya colocando un mensaje de alerta como los siguientes:

Mensaje para un IBAN inválido

Y que cuando llegue a la longitud esté así:

Mensaje para un IBAN válido

Éste es mi código:

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.input-field label{
  font-size: 20px;
  font-weight: 500;
  margin-left: 15px;
  color: #2e2e2e;
}

.input-field input{
  outline: none;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  border-radius: 5px;
  border: 1px solid #aaa;
  padding: 0 15px;
  height: 42px;
  width: 50%;
  margin: 8px 0;
}

.input-field input:valid,
.input-field input:invalid{
  border: 1px solid green;
}

.input-field input:invalid{
  border: 1px solid red;
}

.input-field input:is(:focus, :valid){
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.13);
}

.input-field input[type="date"]{
  color: #707070;
}

.input-field input[type="date"]:valid{
  color: #333;
}
<body>
  <div class="container">
    <div class="input-field">
      <label>Iban</label>
      <input id="iban" name="iban" pattern="[A-Za-z]{24}" required></input>
    <span class="status"></span>
  </div>
  </div>
</body>

3
  • 1
    Tiene el js?, si lo tienes agrégalo a la pregunta
    – JoseMgz_Ux
    el 6 feb. 2023 a las 19:48
  • tenes una expresion regular ahi en el input, cuando pones una cadena con a-z/A-Z de 24 caracteres entonces se pone en verde pero si pones 25 ya vuelve al rojo. Como queres validar el input exactamente? el 6 feb. 2023 a las 20:12
  • @JoseMgz_Ux , el código que está usando no necesita JavaScript. el 6 feb. 2023 a las 20:51

1 respuesta 1

1

La solución es tan sencilla como usar el operador CSS + para indicar el siguiente elemento hermano adyacentes y ::before o ::after para introducir el texto que desees dentro del elemento (antes o después del contenido real que tenga):

.input-field input:valid + .status::before {
  color: green;
  content: 'El IBAN es correcto';
}

.input-field input:invalid + .status::before {
  color: red;
  content: 'El IBAN es incorrecto';
}

El primer selector está buscando el siguiente hermano con clase status del campo del formulario válido. Le asigna el texto "El IBAN es correcto" y un color verde.

El segundo selector está buscando el siguiente hermano con clase status del campo del formulario inválido. Le asigna el texto "El IBAN es incorrecto" y un color de texto rojo.

Ejemplo agregando los estilos a tu código:

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.input-field label{
  font-size: 20px;
  font-weight: 500;
  margin-left: 15px;
  color: #2e2e2e;
}

.input-field input{
  outline: none;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  border-radius: 5px;
  border: 1px solid #aaa;
  padding: 0 15px;
  height: 42px;
  width: 50%;
  margin: 8px 0;
  /* Un par de mejoras visuales */
  display: block;
  text-transform: uppercase;
}

.input-field input:valid {
  border: 1px solid green;
}

.input-field input:invalid {
  border: 1px solid red;
}

/* Texto para el campo válido */
.input-field input:valid + .status::before {
  color: green;
  content: '✔ El IBAN es correcto';
}

/* Texto para el campo incorrecto */
.input-field input:invalid + .status::before {
  color: red;
  content: '✘ El IBAN es incorrecto';
}

.input-field input:is(:focus, :valid){
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.13);
}

.input-field input[type="date"]{
  color: #707070;
}

.input-field input[type="date"]:valid{
  color: #333;
}
<div class="container">
  <div class="input-field">
    <label>Iban</label>
    <input id="iban" name="iban" pattern="[A-Za-z]{24}" maxlength="24" required />
    <span class="status"></span>
  </div>
</div>

PD: He agregado una limitación de 24 caracteres al campo del formulario para que puedas comprobar rápidamente el funcionamiento.

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.