jQuery驗證onBlur摘要

試圖驗證表單，我不知道使用jQuery驗證頁面頂部的內容並顯示摘要。我不想在每個字段旁邊留言。我可以在onsubmit上正常工作，如果我禁用onfocusout/onblur/onkeyup，一切都很好。目前我一直試圖通過showErrors來做到這一點，但我是開放的。jQuery驗證onBlur摘要

我的印象是，jQuery驗證只會帶回失敗時觸發onblur或keyup的單個元素。現在發生的情況是，每次我的摘要被覆蓋，當它觸發onblur時，摘要可能會變回空（大概是因爲errorMap只包含失敗的一個元素）。我想要更新或重新生成摘要，以便在用戶瀏覽表單時保持正確。

我覺得我可能需要保存一個對我的驗證器的引用，然後通過validator.errors（）或.elements（）循環，但我不確定該怎麼辦。下面是我的整個validateform（）函數，從任何提交按鈕中被調用。

function validateform() { 

$("form").validate({ 

    showErrors: function(errorMap, errorList) { 

     var errorCount = this.numberOfInvalids(); 

     if (errorCount > 0) { 
      if (errorCount == 1) { 
       $("#errorContainer h3").html("Your form contains " + errorCount + " error, see details below."); 
      } 
      else { /*two or more errors */ 
       $("#errorContainer h3").html("Your form contains " + errorCount + " errors, see details below."); 
      } 
      var summary = ''; 

      $.each(errorMap, function(key, value) { 
       var field = $('input[name="' + key + '"],select[name="' + key + '"],textarea[name="' + key + '"]'); 
       field.addClass('err'); 
       var fieldname = field.attr("rel"); 
       summary += '<p><span class="errorkey">' + fieldname + '</span> - <span class="errorvalue">' + value + "</span></p>"; 
      }); 
      $('#errorList').html(summary); 
      $('#errorContainer').slideDown(); 
     } 
    }, 
    onfocusout: false, 
    onkeyup: false, 
    onclick: false 

}); 
}

來源

2012-04-13 Cam HayGlass

翻閱 – 2012-04-13 15:43:15

假設這種形式：

<div id="errorContainer"></div> 
<form id="myform"> 
    <div> 
     <label for="field1">field1</label> 
     <input type="text" id="field1" name="field1" /> 
    </div> 
    <div> 
     <label for="field2">field2</label> 
     <input type="text" id="field2" name="field2" /> 
    </div> 
</form>

你可以做這樣的事情，以獲取實時的錯誤，並把它們放在摘要部分：

$(function() { 
    var 
     container = $("#errorContainer"), 
     validator = $("#myform").validate({ 
      rules: { 
       field1: { 
        minlength: 2, 
        required: true 
       }, 
       field2: { 
        required: true 
       } 
      }, 
      messages: { 
       field1: { 
        minlength: "Please enter 2 or more characters for field1", 
        required: "Please enter field1" 
       }, 
       field2: { 
        required: "Please enter field 2" 
       } 
      }, 
      onfocusout: function (element) { 
       this.element(element); 
      }, 
      errorPlacement: function (error, element) { 
       var 
       existingErSelector = $.validator.format("label[for={0}]:contains({1})", element.attr("id"), error.text()); 

       if (container.find(existingErSelector).length === 0) { 
        $("#errorContainer ").append(error); 
       } 
      }, 
      unhighlight: function (validElement) { 
       container.find($.validator.format("label[for={0}]", validElement.id)).remove(); 
      } 
     }); 
});

看到這個小提琴：http://jsfiddle.net/richwag/AjXqp/5/

來源

2013-04-25 04:18:01

jQuery驗證onBlur摘要

回答

相關問題