Как правило, вы хотите создать обработчик событий, который вызывается, когда пользователь взаимодействует с полями ввода и оценивает значение ввода, чтобы определить, какое сообщение показывать.Соответствующее сообщение отображается, а все остальные скрыты.Вы можете выполнить простое сопоставление с шаблоном в браузере или использовать AJAX для отправки ввода на сервер для оценки более сложной проверки, например, если электронная почта уже используется.
В форме регистрации в Твиттере используется комбинация событий длявызвать скрипт оценки.Похоже, используются onclick (или onfocus), onchange и onblur.Инструкции отображаются по щелчку (ваш эквивалент «.h-note»), а ввод оценивается по размытости (элемент теряет фокус).
Я бы использовал jQuery, потому что вам нужен сложный выбор элементов и обработка событий.Вы можете написать простой javascript для достижения того же эффекта, но для этого потребуется гораздо больше кода.Код jQuery для поля имени должен выглядеть примерно так:
<script type="text/javascript">
jQuery(function($) {
//hide all the messages
$('.g-notice, .h-notice, .r-notice').hide();
//create first name validator
var fnameValidator = function() {
var input = $('#fname');
var notices = input.next('.notices');
var g = notices.find('.g-notice');
var h = notices.find('.h-notice');
var r = notices.find('.r-notice');
//hide all notices before deciding which to show
g.hide();
h.hide();
r.hide();
if (input.val() == '') {
//input field is empty, show the help notice
h.show();
} else if (input.val().match(/[^\w\s]/) === null) {
//input field is valid, show the good notice
g.show();
} else {
//show required/error message
r.show();
}
};
//bind event handlers for the first name field
$('#fname').click(fnameValidator).change(fnameValidator);
});
</script>
Кстати: идентификаторы HTML-элементов должны быть уникальными.Вы можете сделать «помощник» классом или сделать каждый идентификатор другим (например, «fname-helper-h»).