Как проверить элемент формы при нажатии клавиши? ⇐ Jquery

[Anonymous]

У меня есть код, который проверяет форму перед ее отправкой на сервер, и я хочу добиться проверки элементов формы при нажатии клавиши. Итак, когда курсор в данный момент находится в элементе формы, я хочу протестировать элемент формы, пока пользователь печатает, и отобразить сообщение об ошибке, если она есть. В настоящее время у меня есть тесты, которые запускаются, когда курсор не в фокусе.
Я попробовал событие «нажатие клавиши», но тогда код не отображает ошибки.
HTML-код:

Код: Выделить всё

Check me

Код JavaScript/jQuery:

Код: Выделить всё

$(function() {

var form = $("#form");

enableFastFeedback(form);

form.submit(function(event) {
// First, read out all entered values.
var name = $("#name").val();
var password = $("#password").val();
var message = $("#message").val();
var checked = $("#checkbox").is(":checked");

// Then we use our validation functions (defined below) to check each input.
validateNameField(name, event);
validatePasswordField(password, event);
validateMessageField(message, event);
validateCheckboxField(checked, event);
});

// In the following, we define helper functions that each validate
// one of the inputs. These will be used further down by our validation
// functions.

function isValidName(name) {
return name.trim().length >= 2;
}

function isValidPassword(password) {
return password.length >= 6 && /.*[0-9].*/.test(password);
}

function isValidMessage(message) {
return message.trim() !== "";
}

// Next, we define the actual validation functions which use the helpers from
// above.  These validation functions add a hint for the user for each invalid
// input and prevent the form from submitting if the input is invalid.

// First, show a hint if the name is not valid or remove the hint if it's
// now valid.
function validateNameField(name, event) {
if (!isValidName(name)) {
$("#name-feedback").text("Please enter at least two characters");
event.preventDefault();
} else {
$("#name-feedback").text("");
}
}

// Do the same for the other inputs.
function validatePasswordField(password, event) {
if (!isValidPassword(password)) {
$("#password-feedback").text("The password should have at least 6 characters and contain a number");
event.preventDefault();
} else {
$("#password-feedback").text("");
}
}

function validateMessageField(message, event) {
if (!isValidMessage(message)) {
$("#message-feedback").text("Please enter a message.");
event.preventDefault();
} else {
$("#message-feedback").text("");
}
}

function validateCheckboxField(isChecked, event) {
if (!isChecked) {
$("#checkbox-feedback").text("Please agree to this.");
event.preventDefault();
} else {
$("#checkbox-feedback").text("");
}
}

function enableFastFeedback(formElement) {

var nameInput = formElement.find("#name");
var passwordInput = formElement.find("#password");
var messageInput = formElement.find("#message");
var checkboxInput = formElement.find("#checkbox");

nameInput.blur(function(event) {
var name = $(this).val();
validateNameField(name, event);

if(!isValidName(name)) {
$(this).css("padding-bottom", "25px");
$(this).css("border", "2px solid #600");
}
else {
$(this).css("padding-bottom", "25px");
$(this).css("border", "2px solid green");
}
});

passwordInput.blur(function(event) {
var password = $(this).val();
validatePasswordField(password, event);

if(!isValidPassword(password)) {
$(this).css("padding-bottom", "25px");
$(this).css("border", "2px solid #600");
}
else {
$(this).css("padding-bottom", "25px");
$(this).css("border", "2px solid green");
}
});

messageInput.blur(function(event) {
var message = $(this).val();
validateMessageField(message, event);

if(!isValidMessage(message)) {
$(this).css("padding-bottom", "25px");
$(this).css("border", "2px solid #600");
}
else {
$(this).css("padding-bottom", "25px");
$(this).css("border", "2px solid green");
}
});

checkboxInput.change(function(event) {
var checkbox = $(this).is(":checked");
validateCheckboxField(checkbox, event);

if(!checkbox) {
$(this).add("label[for='cb']").css("padding-bottom", "25px");
$(this).add("label[for='cb']").css("border", "2px solid #600");
}
else {
$(this).add("label[for='cb']").css("padding-bottom", "25px");
$(this).add("label[for='cb']").css("border", "2px solid green");
}
});

}
});

Итак, как мне решить эту проблему?

Подробнее здесь: https://stackoverflow.com/questions/711 ... -key-press