Checkbox-Validierungen

Question

Ich kann nicht einfach bekommen meinen Kopf um Javascript Validierungen. Ich habe gesehen, Tutorials und seine einfach nicht immer zu mir. Jemand bitte geben Sie mir eine einfache Schritt-für-Schritt-Anleitung, wie ich Validierungen zu Kontrollkästchen hinzufügen können. So sagen, dies ist mein Formular:

<form name="form1" method = "post">

<input name="Conservatives" type="checkbox" value="Conservatives" /> Conservative

<input name="Liberal Democrats" type="checkbox" value="Liberal Democrats" /> Liberal Democrats

<input name="Labour" type="checkbox" value="Labour" /> Labour

</form>

Ich möchte, dass der Benutzer mindestens 2 Checkboxen auswählen. die Validierung sollte von der Client-Seite der Dinge, die ich dann nehmen die Werte mit php an die Datenbank senden getan werden? jede Hilfe Jungs?

Answer 1

Sie möchten also überprüfen, ob aufgrund Ihres Kommentars mindestens zwei dieser Kontrollkästchen aktiviert sind? Ich würde ihnen allen denselben Namen geben:

<input name="partyAffiliation" type="checkbox" value="Conservatives" /> Conservative
<input name="partyAffiliation" type="checkbox" value="Liberal Democrats" /> Liberal Democrats
<input name="partyAffiliation" type="checkbox" value="Labour" /> Labour

Führen Sie dann eine Schleife durch und prüfen Sie, wie viele davon angekreuzt sind. document.getElementsByName erhalten Sie die Kontrollkästchen, von denen jedes einen checked Eigentum.

var allCbs = document.getElementsByName("partyAffiliation");
var numChecked = 0;
for(var i = 0, max = allCbs.length; i < max; i++)
    if (allCbs[i].checked)
        numChecked++;

if (numChecked < 2)
   alert("Select at least two parties!");

---

Ich kenne die Details Ihres Projekts nicht, aber ich werde nur erwähnen, dass jQuery den obigen Code ziemlich einfach macht, wenn die Verwendung dieser Bibliothek etwas ist, gegen das Sie nicht sind:

var numChecked = $("input[name='partyAffiliation']:checked").length;

if (numChecked < 2)
   alert("Select at least two parties!");

---

EDIT

Als Antwort auf einen Kommentar weiter unten: Machen Sie sich keine Sorgen, wenn Sie mehrere Eingänge mit demselben Namen haben. Ihr serverseitiger Code sollte eine kommagetrennte Liste aller (ausgewählten) Werte erhalten, die mit diesem Namen verbunden sind. Wenn Sie also alle drei Kontrollkästchen ankreuzen, sehen Sie etwas wie das Folgende.

Answer 2

Es sieht so aus, als wollten Sie eigentlich Optionsfelder und keine Kontrollkästchen.

Wenn das der Fall ist, verwenden Sie dies:

<form action="" method="post">
    <label><input type="radio" name="vote" value="Conserv" /> Conservative</label><br />
    <label><input type="radio" name="vote" value="LibDem" /> Liberal Democrats</label><br />
    <label><input type="radio" name="vote" value="Labour" /> Labour</label><br />
</form>

Dann wird in Ihrem serverseitigen Code die vote POST-Variable hat entweder "Conserv" , "LibDem" o "Labour" je nach Wahl des Benutzers.