Проверка формы с использованием AJAX

Question

Я делаю регистрационную форму с тремя полями ввода (текст для имени пользователя, пароля для пароля и отправки для входа в систему).

Как вы можете видеть, я использую AJAX для проверки журнала непосредственно на стороне клиента.

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

и аналогичным образом для пароля. Кнопка отправки отключена по умолчанию и разрешена только после проверки обоих полей.

вот моя проблема: После ввода имени пользователя и нажатия кнопки [Tab] мой PHP-скрипт проверяет имя пользователя и показывает зеленый галочку, как показано на изображении. Но когда я ввожу пароль, пользователю придется вручную щелкнуть в другом месте, чтобы вызвать событие onblur и выполнить проверку пароля, которая не очень интуитивно понятна и привлекательна. Проверка пароля должна выполняться, когда фокус все еще находится в поле пароля, что означает, что когда пользователь начинает вводить пароль, должно быть уволено одно событие, а когда он закончит печатать, необходимо запустить другое событие. Как мне это сделать?

Спасибо!

Answer 1

Вы используете onBlur event, что означает, что он будет запущен только тогда, когда поле будет оставлено без внимания, что происходит при нажатии клавиши [Tab]. Чтобы вызвать событие onBlur в поле пароля, вам нужно снова нажать клавишу [Tab]. Вы также можете использовать HTML5 input tags, который имеет проверки по умолчанию. Если вы хотите запустить событие, когда пользователь вводит данные, вы можете использовать события keyup и keydown. Если вы хотите специально запустить одно событие, когда пользователь начнет печатать, а один, когда он закончит, вы должны принять какое-то время, которое требуется для ввода. Посмотрите на это example.