2012-04-26 61 views
0

我正在使用jQuery验证器来验证用户输入。我想弄清楚什么时候应该清除显示在无效元素旁边的自定义错误图标。下面发布的代码会附加错误图标。我试图在showErrors事件中清除它,但没有运气。jquery验证器:何时清除自定义错误图标

$("#form1").validate({ 
       onfocusout: false, 
       onKeyUp: false, 

       rules: { 

       txtDate:{ 
        required: true 
       }, 
       txtType:{     
         required: true 
       }, 
       ddlTime:{     
         required: true 
       } 
       }, 
       messages: { 
       ddlTime: {     
         required: "Please select an option for Time" 
       }, 
       txtDate:{ 
        required: "<br>Please enter valid date" 
       }, 
       txtType: {     
         required: "<br>Please Enter valid type" 
       } 
       }, 
       errorPlacement: function(error, element) { 
        error.wrap("<li></li>").appendTo($("#dvErrorSummary")); 
        $('<div class="errorIcon"></div>').insertAfter(element); 
        } 
      }); 

这是我的CSS看起来像:

label.error { 
    color: red; 
    font-style: italic 
} 

    .errors { color: red; } 
    .errorIcon 
    { 
     background: url(../errorIcon.png); 
     width: 16px; 
     height: 16px; 
     display:inline; 

    } 

这是我的HTML看起来像:

<body> 
<html> 
<head runat="server"></head> 

     <form id="form1" runat="server"> 

      <ul id="dvErrorSummary" name="dvErrorSummary" class="errors"></ul> 

      <select id="ddlTime" name="ddlTime" </select> 
      <input id="txtDate" name="txtDate" /> 
      <input id="txtType" name="txtType" /> 

     </form> 
</body> 
</html> 

回答

1

这是一块,在其中添加了错误消息容器

errorPlacement: function(error, element) { 
        error.wrap("<li></li>").appendTo($("#dvErrorSummary")); 
        $('<div class="errorIcon"></div>').insertAfter(element); 
        } 

可能是使用可以检查长度属性来插入errorIcon只有当值小于1

+0

长度是什么? – Asdfg 2012-04-26 19:19:16

+0

div class =“errorIcon” – defau1t 2012-04-26 19:20:35

+0

如果有多个错误,长度将大于1. – Asdfg 2012-04-26 19:21:47

0

这就是我所做的来解决这个问题:)

jQuery.extend(jQuery.validator.messages, { 
    required: '<i class = "icon-exclamation-sign"></i>' 
}); 

我用上面的方法试过,但我太多的黑客意识到它不可能是正确的。希望这有助于:)