jQuery Validate onBlur mit Zusammenfassung

Question

Ich versuche, ein Formular zu validieren, von dem ich den Inhalt nicht kenne, und zeige mit jQuery Validate eine Zusammenfassung oben auf der Seite an. Ich möchte keine Nachrichten neben jedem Feld haben. Ich kann es gut funktionieren onsubmit, und wenn ich onfocusout/onblur/onkeyup deaktivieren, funktioniert alles gut. Im Moment versuche ich das durch showErrors, aber ich bin aufgeschlossen.

Ich habe den Eindruck, dass jQuery Validate nur das einzelne Element zurückbringt, das fehlgeschlagen ist, wenn es onblur oder keyup feuert. Was jetzt passiert, ist, dass meine Zusammenfassung jedes Mal überschrieben wird, und wenn sie onblur feuert, kann die Zusammenfassung leer sein (vermutlich weil errorMap nur das eine Element enthält, das fehlgeschlagen ist). Ich möchte meine Zusammenfassung aktualisieren oder neu generieren, damit sie korrekt bleibt, wenn Benutzer sich durch das Formular bewegen.

Ich denke, ich brauche vielleicht eine Referenz zu meinem Validator und dann Schleife durch validator.errors() oder .elements(), aber ich bin mir nicht sicher, wohin mit diesem Ansatz gehen. Meine gesamte validateform() - Funktion, die von einer beliebigen Schaltfläche zum Senden aufgerufen wird, ist unten.

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

Unter der Annahme dieses Formular:

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

Sie können etwas tun Live-Fehler zu erhalten und sie in einer Zusammenfassung Abschnitt platzieren:

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

sehen diese Geige: http://jsfiddle.net/richwag/AjXqp/5/