jQueryサマリーを使用してonBlurを検証する

Question

jQuery Validateを使用して、内容を知らないフォームを検証し、ページ上部にサマリーを表示しようとしています。私は各分野の隣にメッセージを望んでいません。 onfubout/onblur/onkeyupを無効にすると、すべてうまく動作します。現時点では私はshowErrorsを通してこれをやろうとしていましたが、私は心が開いています。

jQuery Validateは、onblurまたはkeyupを発生させたときに失敗した要素を1つだけ戻すという印象を受けています。今のところ、私の要約は毎回上書きされ、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 

}); 
} 

Answer 1

：

<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> 

あなたはライブのエラーを取得し、要約セクションでそれらを配置するために、このような何かを行うことができます。http://jsfiddle.net/richwag/AjXqp/5/

：

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

このフィドルを見ます