Bestätigen Sie eine Schaltfläche anhand der Kontrollkästchen

Question

Ich benutze die JQuery Validate-Bibliothek und ich habe eine Schaltfläche, die beim Anklicken eine Liste von Kontrollkästchen öffnet, die neben der Schaltfläche angezeigt wird. Was ich versuche zu tun ist, wenn keines der Kontrollkästchen aktiviert ist, wenn ich auf "Senden" klicke, setze den Validierungsfehler auf die Schaltfläche, sodass die .error-Klasse auf die Schaltfläche angewendet wird, sodass ich den Stil auf die Schaltfläche und nicht auf die Schaltfläche festlegen kann Kontrollkästchen. Hier ist im Grunde, was ich

<button type="button" id="myButton" name="myButton"></button> 
<ul id="myListOfCheckboxes"> 
    <li><input type="checkbox" id="chk1" name="checkboxList"></li> 
    <li><input type="checkbox" id="chk2" name="checkboxList"></li> 
    <li><input type="checkbox" id="chk3" name="checkboxList"></li> 
</ul> 

und die Validierung haben ...

$("#frmMyForm").validate({ 
    rules: { 
     myButton: { 
      required: { 
       function(element) { 
        return $("input[name='checkboxList']").is(":checked"); 
       } 
      } 
     } 
    } 
}); 

Answer 1

Ort die Validierung Fehler auf der Schaltfläche, sodass die .error-Klasse auf die Schaltfläche angewendet wird, sodass ich den Stil auf die Schaltfläche und nicht auf die Kontrollkästchen festlegen kann.

Sie können dies nicht direkt tun.

Sie können kein button Element mit diesem Plugin validieren. jQuery Validate wurde nur zum Überprüfen von Elementen entwickelt, die tatsächliche Formulardaten enthalten: select, textarea, bestimmte Typen von input Elementen und bestimmte Elemente mit dem Attribut contenteditable. Nichts anderes.

Eine Problemumgehung könnte sein, dass Sie ein type="hidden"input-Element anstelle des validieren. Platzieren Sie das ausgeblendete Element in der Nähe Ihrer Schaltfläche, damit die Bestätigungsmeldung genau dort angezeigt wird, wo Sie sie benötigen. Denken Sie daran, die Option ignore in .validate() zu ändern, um dies zu ermöglichen.

Da der Fehler ausgelöst wird, wenn die Kontrollkästchen leer bleiben, validieren Sie im Wesentlichen nur die required Regel auf den Kontrollkästchen! Da dies der Fall ist, können Sie Fehlerklassen programmgesteuert auf die button basierend auf den Fehlerklassen in den Kontrollkästchen anwenden.

Answer 2

Verwendung dieses, beacuse input-Tag mit Namensattribut als checkboxList nicht id

$("#frmMyForm").validate({ 
     rules: { 
      myButton: { 
        required: { 
         function(element) { 
          return $("input[name='checkboxList']").is(":checked"); 
         } 
       } 
      } 
     } 
    });