你如何强制jQuery Validate在表单元素内部而不是外部显示错误？

2023年3月17日 139次阅读

以jQuery Validate的这个基本示例为例(请参阅下面的链接),如何在可能的情况下指示它在表单元素中显示错误消息(显然复选框不起作用)？

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

最佳答案 显然你会想要为自己的形式定制它,但绝对定位可能会帮助你.对于您引用的示例：

[截断]加价：

<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();
    }
  });
});
点赞