How to get input text length and validate user in javascript

Question

I want to valid if user has entered username and password at the time of creating an account is safe or not based on its length(for my case five) on the right side of input field by showing that in different color i.e. for shorter in red, otherwise in green. How can I do that with javascript?

Answer 1

JavaScript validation is not secure as anybody can change what your script does in the browser. Using it for enhancing the visual experience is ok though.

var textBox = document.getElementById("myTextBox");
var textLength = textBox.value.length;
if(textLength > 5)
{
    //red
    textBox.style.backgroundColor = "#FF0000";
}
else
{
    //green
    textBox.style.backgroundColor = "#00FF00";
}

Answer 2

While filip-fku's code works as asked, I wouldn't try to reinvent the wheel when good password strength meters have been written for several existing jQuery form validation plugins. This one works well (demo here).