Чтобы задать представленную валидацию, мы напишем скрипт jQuery, который будет устанавливать blur для выбранных элементов input. Скрипт необходимо будет разместить в файле registration-page.php, после основного цикла, до вызова хука wp-footer():
...
jQuery(".cform :input").blur(function(){
/*указанный "if" позволяет исключить из рассмотрения
кнопку Submit и поле Email */
if (jQuery(this).val() != "Submit") {
/*указанный "if" позволяет получить только пустые поля*/
if (jQuery(this).val().length == 0) {
jQuery(this).after('<span class="wrong"> ! </span>');
}else{
/*"else" иначе поле заполнено верно*/
jQuery(this).after('<span class="correct"> thanks. </span>');
}//end if no length
}//end ifelse !submit
});//end blur function
...
Мы будем добавлять восклицательный знак, если поле не было заполнено; в противном случае выводить слово «thanks». Однако на данном этапе можно столкнуться с одной проблемой: если пользователь снова заполнит поле, он опять получит подтверждение верного ввода. Для того чтобы исправить это, мы добавим произвольный скрипт, который будет работать с focus. Скрипт удалит все последующие элементы span:
...
jQuery(".cform :input").focus(function(){
jQuery(this).next("span").remove();
});//end focus function
...
Указанный код является неплохой проверкой на пустоту ввода. Вы, наверно, уже заметили, что теги span были добавлены вместе с определенными классами. Теперь выполним их стилизацию в файле style.css:
...
/*for registration form*/
.wrong{
display:block;
float:right;
margin-right: 120px;
height: 20px;
width: 20px;
background: url(images/form-icons.png) no-repeat 0 -20px;
text-indent: -3000px;
}
.correct{
display:block;
float:right;
margin-right: 120px;
height: 20px;
width: 20px;
background: url(images/form-icons.png) no-repeat 0 0;
text-indent: -3000px;
} Итоговый результат можно увидеть на скриншоте.
