在输入文本框中键入时显示图标

Question

I'm working on a registration page for users on a website. It validates the input boxes and displays errors if the format are invalid or the user already exist in the database.

However, I want it to look a bit more elegant than just simple error messages in text. I assume most of you have seen websites where there is an icon (+ the error message) on the right side of each input box that changes if the input is valid or not.

I know you can do this simply by doing it something like this..

if (input is validated and correct) {
   *display successful icon*;
} else {
   *display not-successful icon*;

But what about the loading icon while the user is answering/typing in the input boxes? How do you check if the user is typing or not? What programming language is necessary to make this work? Is it possible to do it with only HTML, PHP and CSS, or do I have to use javascript or something like that?

Answer 1

Try this

$('input[@type="text"]').keypress(function() {
    $('#lodingicon').fadeIn('slow');
});