Проверка пустого ввода

Чтобы задать представленную валидацию, мы напишем скрипт 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;
}  

Итоговый результат можно увидеть на скриншоте.