jQuery-Validierung mindestens eine checkbox ausgewählt ist

Habe ich das folgende Stück html-code für Formular-Checkboxen

<div class="drinking col-xs-12">
  <div class="col-xs-7 drinkingLeft">
    <input type="checkbox" name="allwines" id="allwines" value="0" class="require-one col-xs-1 styled myClassA"  value="0" data-label="All Wines" />
    <input id='allwinesHidden'  type='hidden' value='0' name='allwines'>
  </div>
  <div class="col-xs-5 drinkingLeft">
    <input type="checkbox" name="beer" id="beer" value="0" class="require-one col-xs-1 styled myClassB"  value="0"  data-label="Beer" />
    <input id='beerHidden'  type='hidden' value='0' name='beer'>
  </div>
  <div class="clearix"></div>
  <div class="col-xs-7 drinkingLeft">
    <input type="checkbox" name="redwines" id="redwines" value="0" class="require-one col-xs-1 styled myClassC"  value="0" data-label="Red Wines" />
    <input id='redwinesHidden'  type='hidden' value='0' name='redwines'>
  </div>
  <div class="col-xs-5 drinkingLeft">
    <input type="checkbox" name="cider" id="cider" value="0" class="require-one col-xs-1 styled myClassD"  value="0" data-label="Cider" />
    <input id='ciderHidden'  type='hidden' value='0' name='cider'>
  </div>
  <div class="clearix"></div>
  <div class="col-xs-7 drinkingLeft">
    <input type="checkbox" name="whitewines" id="whitewines" value="0" class="require-one col-xs-1 styled myClassE"  value="0" data-label="White Wines" />
    <input id='whitewinesHidden'  type='hidden' value='0' name='whitewines'>
  </div>
  <div class="col-xs-5 drinkingLeft">
    <input type="checkbox" name="spirits" id="spirits" value="0" class="require-one col-xs-1 styled myClassF"  value="0" data-label="Spirits" />
    <input id='spiritsHidden'  type='hidden' value='0' name='spirits'>
  </div>
  <div class="clearix"></div>
  <div class="col-xs-7 drinkingLeft">
    <input type="checkbox" name="sparkling" id="sparkling" value="0" class="require-one col-xs-1 styled myClassG"  value="0" data-label="Sparkling/Champagne" />
    <input id='sparklingHidden'  type='hidden' value='0' name='sparkling'>
  </div>
  <div class="col-xs-5 drinkingLeft">
    <input type="checkbox" name="fortified" id="fortified" value="0" class="require-one col-xs-1 styled myClassH"  value="0" data-label="Fortified" />
    <input id='fortifiedHidden'  type='hidden' value='0' name='fortified'>
  </div>
  <div id="error_msg3"></div>
  <div class="clearix"></div>
</div>
</div>

Ich möchte sicherstellen, dass mindestens eines der Kontrollkästchen aktiviert ist.

Möchte ich, dass NICHT wie eine alert-box, aber die Nachricht brauchen zu zeigen, bis in das div-Fehler-msg3.

Bitte beachten Sie, dass die Eingänge müssen unterschiedliche Klassennamen und ids. Eine Inszenierung, der link dazu ist auf

https://bitly.com/1i3f1MY

Ich bin mit jQuery Validierung zur Validierung rest der form. Wird nett sein, um die Lösung durch jquery Validierung.

Vielen Dank im Voraus

Ich habe den code in jsfiddle. jsfiddle.net/dHrvT/15
Aktualisiert jsfiddle jsfiddle.net/dHrvT/17
Wiederholen einfach nur wieder : * die Namen/ids der einzelnen Checkboxen unterschiedlich sind * Wenn der Benutzer die Schaltfläche zum senden klickt, brauche ich die folgenden: * Wenn keine checkbox angeklickt wird, dann wird die Fehlermeldung zu zeigen, genau wie die anderen Fehlermeldung * wenn eines der Kontrollkästchen aktiviert ist, wird die Fehlermeldung muss wieder verborgen werden* und wenn der Benutzer unclicks alle Fehlermeldung wieder, die Fehlermeldung muss wieder eingeblendet werden. Und Nein, ich kann nicht die Namen alle gleich. Es ist mit custom checkbox (ziemlich Links).

InformationsquelleAutor Hello Universe | 2013-11-23

jquery jquery-validate

4

Müssen Sie ändern Sie die name-Attribute der Checkboxen und fügen Sie eine Regel für die es mit der minlength auf 1 gesetzt.

Können Sie nach zeigen Sie die benutzerdefinierte Nachricht, und hängen Sie an #error_msg3 mit :
```
if(element.attr("name") == "check") error.appendTo("#error_msg3")
```
BEARBEITEN
```
$("input[type='checkbox'][name='check']").change(function() {
    if ($("input[type='checkbox'][name='check']:checked").length){
        $(this).valid()
    }
})
```
EDIT 2

Habe ich aktualisiert, der Geige, jetzt die Meldung schaltet ordnungsgemäß, wenn Sie mindestens ein Kontrollkästchen aktiviert ist oder nicht.
```
$("input[type='checkbox'][name='check']").change(function() {
    $('#submitDetails').valid();
});
```
Fiedel hier
- Ich habe versucht, Ihr jsfiddle. Wenn ich auf den submit-button und keine checkbox aktiviert ist, bekomme ich die Fehlermeldung. Allerdings, wenn der checkbox überprüft wird nun, die Fehlermeldung nicht verschwinden.. auch Sie sollten sich ein-und ausschalten mit der checkbox überprüft wird und nicht überprüft.. Das ist, wenn es nichts geprüft, es sollte die Fehlermeldung.. und wenn geprüft die Fehlermeldung disseapers genauso wie die anderen Fehler Felder
- Entfernen Fehlermeldung, wenn eine checkbox aktiviert ist, ich habe aktualisiert die Fiddle, siehe edit.
- Danke. Jedoch, es kommt nicht wieder, wenn der Benutzer unclicks es. Lassen Sie uns also sagen, dass Benutzer klickt auf senden-Schaltfläche, bekommt er die Fehlermeldung. Wenn der Benutzer wählt, eine der checkbox, wird die Fehlermeldung verschwindet. (Fein-bis jetzt). allerdings, wenn der Benutzer jetzt entscheiden, Sie zu deaktivieren Sie Kontrollkästchen, sollte die Fehlermeldung wieder erscheinen rechts. Es sollte Umschalten mit auf ändern rechts
- Ich habe es Arbeit, siehe auch update 🙂
- Danke. Aber ich habe etwas bemerkt, wenn ich versuchte, es zu implementieren. Ändern Sie die name-Eigenschaft von jedem der betreffenden Elemente, so dass Sie alle den gleichen Namen haben. Beginnen mit die Idee war, dass Sie unterschiedliche Namen haben :). Also im Grunde Ihre Lösung hat mir nicht geholfen am Ende. Aber danke für den Versuch und cheers
- Checkboxen sollten den gleichen Namen haben, wenn Sie wollen, auf eine bestimmte Sache, die Sie benötigen, um die id.
- Wie Sie sehen können Checkboxen unterschiedliche Namen und unterschiedliche ids. Ich brauchte eine Lösung für, die. In normalen Fällen, ja Checkboxen hat den gleichen Namen.. Aber nicht in meinem Fall.. 🙂 Buddy, dass ist der Grund, warum ich steckengeblieben oder was es sonst war, eine einfache Lösung mit jquery Validierung :P. Anyway, danke für den Versuch. Bisher hat man dieses problem blieb ungelöst.
InformationsquelleAutor Balthazar

Ist dies sehr einfach......

function validate_form()
{
valid = true;

if($('input[type=checkbox]:checked').length == 0)
{
    alert ( "ERROR! Please select at least one checkbox" );
    valid = false;
}

return valid;
}

HTML

<form name="myform" method="post" action="#" onsubmit="return validate_form();">
<input type="checkbox" name="box1"  value="box1">Box1
<input type="checkbox" name="box2"  value="box2">Box2
<input name="submit" type="submit" value="Submit"/>
</form>

InformationsquelleAutor Paul TopRank

2

Zitat OP:

"Ich möchte sicherstellen, dass mindestens eines der Kontrollkästchen aktiviert ist."

Wenn Sie möchten, verwenden Sie die jQuery Validate plugin, und alle Titel haben einen unterschiedlichen name, verwenden Sie einfach die require_from_group - Methode, die Teil des die additional-methods.js - Datei.

Da Sie bereits eine gemeinsame Klasse, auf diese Rechte berufen require-one, ist es sogar noch einfacher.
```
$('#form').validate({
    rules: {
        fieldname: {
            require_from_group: [1, '.require-one']
        },
        //declare same rule on all eight checkboxes
        ....
        ....
    }
});
```
Jedoch, anstatt zu erklären, alle acht innerhalb .validate() verwenden, können Sie die .rules('add') Methode innerhalb eines jQuery - .each() zu erklären, Sie alle auf einmal.
```
$('.require-one').each(function () {
    $(this).rules('add', {
        require_from_group: [1, this],
        messages: {
            require_from_group: "please check one"
        }
    });
});
```
Dann kombinieren Sie alle acht Nachrichten in einer,, verwenden Sie die groups option...
```
$('#form').validate({
    groups: {  //combine these error messages into one
        checkboxes: 'allwines beer redwines cider whitewines spirits sparkling fortified'
    }
});
```
Arbeiten DEMO: http://jsfiddle.net/JVWu2/1/

Platzieren Sie Ihre Fehlermeldung in der #error_msg3 Fehler Feld ist nicht anders, als er sich von Ihren anderen jQuery-Nachrichten überprüft.
- Hi @Sparky , ich habe meine codes in einem jsfiddle jsfiddle.net/dHrvT/15 . Jedoch, es ist ok für Sie, um Ihre Lösung und lassen Sie mich wissen, wenn es funktioniert. Ich habe versucht, in realen Inszenierung von links und nicht in der Lage war. Ich glaube, Ihre Lösung funktioniert.. ich kann einfach nicht scheinen zu integrieren, die einen mit den anderen
- href="http://jsfiddle.net/JVWu2/" >ich vollständig beantwortet Ihre Frage, wie Sie ursprünglich gepostet hat. Es wurde nichts erwähnt in Ihrer OP über die Integration dieser mit prettyCheckable. IMO, das ist eine ganz andere Frage. Das jQuery Validate plugin ist nur auf der Suche auf Ihre eigentliche checkbox-Elemente und bis Sie herausfinden können, wie das Umschalten derjenigen, die diese niemals funktionieren.
- Ich merke auch, dass Sie Ihre jQuery-code ist unnötig repetitiv. Fast alle Ihre .on('change') Handler kombiniert werden könnten, in einem und sollten Sie nur aufrufen müssen .prettyCheckable() einer Zeit. Es ist nur eine Frage der Verwendung der richtigen jQuery-Selektoren auswählen, um alle Ziel-Elemente auf einmal.
InformationsquelleAutor Sparky

Versuchen Sie es mit diesem

$("#YourbuttonId").click(function(){
    if($('input[type=checkbox]:checked').length == 0)
    {
        alert('Please select atleast one checkbox');
    }
});

Durch Plugin -

HTML

<label class="checkbox inline">
<input type="checkbox" id="typecb1" name="spamm[]" value="Loading Point"> Loading Point
</label>
<label class="checkbox inline">
<input type="checkbox" id="typecb2" name="spamm[]" value="Unloading Point"> Unloading Point
</label>
<label class="checkbox">
<input type="checkbox" id="typecb3" name="spamm[]" value="Retailer Unloading"> Retailer Unloading
</label>

Skript

rules:{
     "spamm[]": { 
      required: true, 
      minlength: 1 
      }
   }

Bitte keine alert-box. Wie ich sagte, keine alert-box. Wenn möglich als eine integrierte Lösung mit jQuery validation plugin wie gesagt
siehe aktualisierte Antwort @Himu
funktioniert gut, vielen Dank

InformationsquelleAutor Sridhar R

1

Versuchen

hinzufügen dieser code wird
```
var chck = $('input[type=checkbox]');
chck.addClass('check-one');
$.validator.addMethod('check-one', function (value) {
    return (chck.filter(':checked').length > 0);
}, 'Check at least one checkbox');
```
fiddle Demo

Gruppe zeigt Fehler in vor der ersten check-box nur
```
var chck = $('input[type=checkbox]');
chck.addClass('check-one');
$.validator.addMethod('check-one', function (value) {
    return (chck.filter(':checked').length > 0);
}, 'Check at least one checkbox');
var chk_names = $.map(chck, function (el, i) {
    return $(el).prop("name");
}).join(" ");
$("#submitDetails").validate({
    groups: {
        checks: chk_names
    },
    submitHandler: function (form) {
        alert('Form Submited');
        return false;
    }
});
```
Gruppe entfernen, wenn Sie wollen, Fehler zu zeigen, vor allen check-Boxen

fiddle Demo
```
$("#submitDetails").validate({
    submitHandler: function (form) {
        alert('Form Submited');
        return false;
    }
});
```
- Dank Tushar. Ihre Antwort ist so nah. Sie können es hier zu sehen bitly.com/1i3f1MY Es funktioniert in der jsfillde. Was mache ich falsch? Hier ist die js-Datei, die ich mit bit.ly/1aNWWMl sehen Sie den code, den ich Hinzugefügt. Beim klicken auf den submit-button, es zeigt sich nach all den labels... nicht wie die Art und Weise, in jsFiddle. Es muss ein bisschen wie das jsFiddle... Wenn der submit-button geklickt, es sollte zeigen, bis in <div id="error_msg3"></div> und wenn irgendeine checkbox angeklickt wird, sollte die Fehlermeldung verschwinden.
- Rot im Gesicht. Ich denke, ich vermute, mein Fehler. Warten Sie einen min.. Befestigung
- Hallo. Habe versucht es zu beheben. Couldnt. Lassen Sie mich wissen, wenn Sie mir helfen können dieses Problem lösen. Dank
- Finden Sie diese Demo mit Ihrer vollen form code.
- Finden Sie die jsfiddle. Ich habe meinen code, es Könnte nicht erhalten, es funktioniert mit deinem code, pro sagen...So können Sie es zu versuchen...bitte
InformationsquelleAutor Tushar Gupta - curioustushar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.