Form validation using AJAX

Question

I'm making a log-in form with 3 input fields(text for username, password for password and submit for logging in).

Looks something like this:

As you can see, I am using AJAX to validate the log in directly at the client side.

var username = document.getElementById("username").getElementsByTagName("input")[0];
username.onfocus = function(){
    this.className = "thinking";
}
username.onblur = validateUsername;

and similarly for the password as well. The submit button is disabled by default and only enabled after both the fields are validated.

Here is my problem: After typing in the username and hitting the [Tab] button, my PHP script validates the username and shows the green tick as shown in the image. But when I type in the password, the user will have to manually click elsewhere to trigger the 'onblur' event and perform password validation which isn't very intuitive and appealing. The password checking should be done while the focus is still on the password field which means that when the user starts typing the password, one event should be fired and when he finishes typing, another event should be fired. How should I go about this?

Thank you!

the answer lies in this question. I used it too http://stackoverflow.com/questions/14042193/how-to-trigger-an-event-in-input-text-after-i-stop-typing-writing — Viraj Nalawade, Jun 03 '15 at 07:06
Yes, I meant `onkeyup` :) And even better is `oninput`, but IE8 doesn't support it. — Robo Robok, Jun 03 '15 at 07:13
As we can see, you're not using ajax... at least not in the piece of code you provided. But that's not relevant to your question anyway. — Jeremy Thille, Jun 03 '15 at 07:14
Thank you everyone. I got it to work. I got the answer from another SO thread. I called a delay of about 2s after an `onkeyup` and sent the ajax request after the delay. Worked like a charm. — Suyash Shetty, Jun 03 '15 at 08:00

score 1 · Accepted Answer · edited May 23 '17 at 11:51

You are using onBlur event which means that it will be triggered only when the field will be left unfocussed which is happening when you are pressing [Tab] key. In order to trigger the onBlur event on the password field you have to press [Tab] key again. You can also use HTML5 input tags which has default validations. If you want to fire an event when the user types then you can use keyup and keydown events. If you want to specifically fire one event when the user starts typing and one when he finishes then you have to assume some time he takes for typing. Take a look at this example.

Form validation using AJAX

1 Answers1