Probablemente esta es una pregunta bastante ficticia, pero no pude encontrar una solución simple (algo así como un atributo HTML5 especial).

Por ejemplo, tengo un formulario simple con validación habilitada para el campo email:

<form>
    <input required type="email" placeholder="email@gmail.com"></input>
</form>

Y algunos estilos para las pseudo clases :valid, :invalid:

input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}

Entonces, cuando abro una página con este formulario, la entrada ya está enmarcada en rojo, porque está vacía. La pregunta es: ¿cómo puedo habilitar la validación solo después de que el usuario haya cambiado algo?

0
Sergey Potekhin 17 feb. 2017 a las 02:03

4 respuestas

La mejor respuesta

Puede usar evento de cambio, consulte:

<!-- added a ID to get it easier later -->
<input required id="myInput" type="email" placehodler="email@gmail.com"></input>

En su CSS, use clases para configurar sus estilos:

input.valid {
  border: 1px solid green;
}
input.invalid {
  border: 1px solid red;
}

En su javascript:

document.getElementById('myInput').onchange = function(){
     // validation code here

     this.classList.add('valid') // if validation is true
     this.classList.add('invalid') // if validation is false
}
2
Maycow Moura 16 feb. 2017 a las 23:11

Puede usar querySelector para hacer la distinción entre válido e inválido en lugar de css. Debe usar keyup o keydown en lugar del evento change porque el cambio requiere que vuelva a enfocar para verificar.

Js

myform.querySelector('input').addEventListener('keyup', function() {
  if (myform.querySelector('input:invalid')) myform.querySelector('input:invalid').style.border = "1px red solid";
  else myform.querySelector('input:valid').style.border = "1px solid green";
});

Html

<form id="myform">
  <input required type="email" placeholder="email@gmail.com"></input>
</form>
1
zfrisch 16 feb. 2017 a las 23:19

Tienes un amplio conjunto de métodos abiertos para lograr esto. Iré por los más fáciles: blur || input.

Puede adjuntar los eventos input o blur y validar cuándo suceden. La diferencia es que blur se llamará cuando el usuario enfoque otro elemento (haga clic en el botón Enviar, vaya a otra entrada, haga clic en otra parte de la página, lo que sea) y input se llama justo después de que el usuario cambie algo en la entrada, generalmente presionando una tecla, pero también ocurre cuando el usuario pega o corta. input es la forma "oficial" html5 de escuchar elementos de entrada.

document.getElementById('emailInput').oninput = function(){
    // validateinput
}

Además, puede ir al evento change, que es exactamente lo mismo que blur, pero solo se activa si el usuario cambió el contenido. Lo "malo" es lo mismo que blur: no hay validación en vivo mientras se escribe.

1
Jorge Fuentes González 16 feb. 2017 a las 23:15

El valor de entrada se verificará dinámicamente con cada tecla presionada por el usuario. Puede ajustar los requisitos usted mismo.

var input = document.getElementById('input');

function validate(){
  if (input.value.length > 2) {
    input.className = 'valid';
  } else {
    input.className = 'invalid';
  }
}
.valid {
  border: 1px solid green;
}
.invalid {
  border: 1px solid red;
}
<form>
    <input required type="email" placehodler="email@gmail.com" id='input' onkeyup='validate()'>
</form>
1
kind user 16 feb. 2017 a las 23:14