jQuery Validierung von sechs Eingabefeldern als Gruppe

Question

Ich versuche 6 Formularfelder zu implementieren, die es Benutzern ermöglichen, einen 6-stelligen Code einzugeben, der an ihre E-Mail gesendet wird.

Alle diese 6 Felder sind erforderlich und die Fehlermeldung wird auf der rechten Seite angezeigt, wenn eine von ihnen nicht ausgefüllt ist.

In meinem Code, habe ich die folgenden Probleme

1), wenn sie alle gefüllt sind NICHT, erscheint die Fehlermeldung. Das ist richtig.

2) Solange einer von ihnen gefüllt ist, verschwindet die Fehlermeldung.

2a) Erst wenn ich auf "Senden" klicke, erscheint kurz die Fehlermeldung. Sobald ich den Klick loslasse, ist die Fehlermeldung verschwunden. Ich bin mir nicht sicher, ob dies daran liegt, dass die Fehlermeldungen überschrieben werden.

Kann eine Methode geschrieben werden, um zu überprüfen, dass, solange eines der Felder nicht gefüllt ist, dann die Fehlermeldung angezeigt werden soll?

$(document).ready(function(){ 

    $("#verification_form").validate({ 
     groups: { 
      inputGroup: "num1 num2 num3 num4 num5 num6"   
     },     
     rules: { 
      Name: { 
       required: true, 
       maxlength:50 
      }, 
      Email: { 
       required: true, 
       email:true, 
       maxlength:50 
      }, 
      num1: { 
       required:true 
      }, 
      num2: { 
       required:true           
      }, 
      num3: { 
       required:true 
      }, 
      num4: { 
       //required: "#divVerifyEmail:visible", 
       required:true           
      }, 
      num5: { 
       required:true 
      }, 
      num6: { 
       required:true           
      }                          
     }, 


     highlight: function(element, errorClass) { 
      $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
     }, 
     errorPlacement: function (error, element) { 
      $(element).closest('.form-group').find('.error-msg').text(error.text()); 
     }, 
     unhighlight: function(element) { 
      $(element).closest('.form-group').removeClass('has-error').addClass('has-success') 
     }, 
     submitHandler: function (form) { // for demo 
      alert('valid form submitted'); // for demo 
      return false; // for demo 
     } 
})  

Answer 1

Die Option groups bündelt lediglich alle Nachrichten in einem. Wenn alle sechs Felder ihre eigene required Regel haben, wird die Nachricht gelöscht, wenn ein Feld erfüllt ist, und wenn ein anderes Feld nicht erfüllt ist, kommt die Nachricht zurück und so weiter und schaltet bei der Bewegung um die Felder ein/aus .

Diese Option war nicht für mehrere Felder mit unterschiedlichen Nachrichten vorgesehen. Es war für die Verwendung mit komplexen Regeln wie require_from_group gedacht, die immer die gleiche Nachricht auf mehrere Felder gleichzeitig setzen würde. Die groups Option funktioniert so, wie es funktionieren soll, aber es ist nicht das, was Sie wollen.

Sie können stattdessen die require_from_group Regel versuchen.

$("#verification_form").validate({ 
    groups: { 
     inputGroup: "num1 num2 num3 num4 num5 num6" 
    }, 
    rules: { 
     .... 
     num1: { 
      require_from_group: [6, $("[name^=num]")] 
     }, 
     num2: { 
      require_from_group: [6, $("[name^=num]")] 
     }, 
     num3: { 
      require_from_group: [6, $("[name^=num]")] 
     }, 
     num4: { 
      require_from_group: [6, $("[name^=num]")] 
     }, 
     num5: { 
      require_from_group: [6, $("[name^=num]")] 
     }, 
     num6: { 
      require_from_group: [6, $("[name^=num]")] 
     } 
    }, 
    ... 

Oder ein kürzerer Weg, diese Regel auf alle sechs Felder auf einmal ...

$("[name^=num]").each(function() { 
    $(this).rules('add',{ 
     require_from_group: [6, $("[name^=num]")], 
     messages: { 
      require_from_group: "These 6 fields are required" 
     } 
    }); 
}); 

DEMO zuweisen: jsfiddle.net/xbwzt7p9/