Как вы можете заставить jQuery Validate показывать ошибки внутри элементов формы, а не снаружи?

Question

Если взять этот базовый пример jQuery Validate (см. Ссылку ниже), как вы можете указать ему показывать сообщения об ошибках внутри элементов формы, где это возможно (очевидно, флажки не будут работать)?

http://docs.jquery.com/Plugins/validation#source

Answer 1

Очевидно, что вы захотите адаптировать его для своей формы, но здесь вам может помочь абсолютное позиционирование.Для приведенного вами примера:

[Усеченная] разметка:

<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
 </fieldset>
</form>

CSS:

.cmxform p{position:relative;}
.cmxform label.error{position:absolute; left: 11.7em; top:5px; display:block; width:180px; /*Computed width of text input was 189px*/ overflow:hidden;}

ИзКонечно, у этого подхода есть один существенный недостаток, заключающийся в том, что метка ошибки будет висеть над (и над) тем, что печатает пользователь.На примере jquery.com у меня появилось красное сообщение «Пожалуйста, введите не менее 2 символов» поверх первой буквы моего имени, когда я печатал.Чтобы исправить это, вы хотели бы сделать что-то вроде этого:

$(document).ready(function(){
  $('.cmxform input[type=text]').focus(function(){
    $(this).siblings('.error').hide(); // Hide the error while the user is typing
  }).blur(function(){
    if( !$('#commentForm').validate().element(this) ){ // Re-validate this element, show the label if still invalid
      $(this).siblings('.error').show();
    }
  });
});