Basta utilizar o evento input
no JavaScript. Com ele você poderá detectar todas as alterações do campo.
Exemplo com JavaScript "Puro":
/* Captura o campo */
const fieldMessage = document.querySelector("#message")
/* O evento INPUT irá detectar todas as alterações no valor digitado/colado */
fieldMessage.addEventListener("input", _ => {
/**
* Verifica se o valor digitado possui mais de 10 caracteres
* Caso possua, adiciona a classe `valid`
*/
if (fieldMessage.value.length > 10) {
fieldMessage.classList.remove("invalid")
fieldMessage.classList.add("valid")
}
/* Caso contrário remove-a */
else {
fieldMessage.classList.remove("valid")
fieldMessage.classList.add("invalid")
}
})
input.valid {
/* Altera a cor da borda */
border: 2px solid green;
/* Altera a cor da sombra */
box-shadow: 0 0 5px green;
}
input.invalid {
/* Altera a cor da borda */
border: 2px solid red;
/* Altera a cor da sombra */
box-shadow: 0 0 5px red;
}
<input type="text" id="message" />
Exemplo com jQuery:
/* Captura o campo */
const fieldMessage = document.querySelector("#message")
$("#message").on("keyup", function(){
if ($("#message").val().length > 10) {
$(this).addClass("valid").removeClass("invalid")
} else {
$(this).addClass("invalid").removeClass("valid")
}
})
input.valid {
/* Altera a cor da borda */
border: 2px solid green;
/* Altera a cor da sombra */
box-shadow: 0 0 5px green;
}
input.invalid {
/* Altera a cor da borda */
border: 2px solid red;
/* Altera a cor da sombra */
box-shadow: 0 0 5px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="message" />