Let’s assume your field is this
<input type="text" id="container" name="fname"><br>
javascript provides an event assigner called onfocus and onblur , onfocus works when you focus with your mouse on the element and onblur when you take the focus off
let’s go to an example solving your problem :
First recover your div by id
var inputName = document.getElementById("container");
Now let’s put the onfocus event and put the yellow color in focus
inputName.onfocus = function(){
InputName.style.backgroundColor = "yellow";
}
Now let’s log onblur and validate the amount of characters
inputName.onblur = function(){
Name = InputName.value;
if(Name.length >= 3){
InputName.style.backgroundColor = "green";
}
else{
InputName.style.backgroundColor = "red";
}
}
The length function counts the number of characters in a String, so I do the validations according to your example.
I hope I helped , I’m answering my first question , so I may have explained in a way not very easy , accepted tips on how to improve my explanations .
See if you can help https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length
– Augusto Vasques