jQuery-Validate - Add Error-Klasse Parent-Div
Ich bin mit dem jQuery Validate plugin, und finde nie ein guter Weg, um Fehler anzuzeigen, die für die Checkboxen. Ich möchte markieren Sie das Kontrollkästchen Beschriftungen in rot, wenn keine ausgewählt sind, und entscheiden, tun Sie dies, indem Sie eine error-Klasse für das div enthält die Checkboxen und checkbox-Etiketten. Jedoch, es scheint nicht zu sein indem die Klasse. Bin ich nicht auswählen das div korrekt?
HTML:
<div class="left-aligned indent">
<label id="id_label" for="id" class="label">Items:</label>
<div class="select-group">
<input type="checkbox" name="items" value="1" id="item_1" />
<label class="checkbox">Item #1</label><br />
<input type="checkbox" name="items" value="1" id="item_2" />
<label class="checkbox">Item #2</label><br />
<input type="checkbox" name="items" value="1" id="item_3" />
<label class="checkbox">Item #3</label><br />
</div>
</div>
Javascript:
$().ready(function() {
$('#addForm').validate({
rules: {
"items": {
required: true,
minlength: 1
}
},
errorPlacement: function(error, element) {
if (element.is(':checkbox')) {
$(this).prev("div").addClass('checkbox-error');
}
else {
return true;
}
}
});
});
CSS:
.error {
background-color: #FF898D;
border: 1px solid #000;
}
.checkbox-error {
color: #FF898D;
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
$(element).parent('div').addClass('checkbox-error');
Sollte dies funktionieren:
Kasse in der Dokumentation für weitere Optionen:
Aus meiner Antwort auf Klasse hinzufügen, um parent-div, wenn die Validierung Fehler tritt mit jquery Validierung weil ich glaube, es fügt Wert an den vorhandenen Antworten auf diese Frage ...
Zugang Validator Einstellungen
Der erste Auftrag des Geschäfts ist, ändern Sie die
settings
- Objekt auf Ihrem Formular validator. Sie können dies auf eine der folgenden Arten:jQuery.validator.setDefaults()
.validate([Optionen])
$("form").Daten("validator").Einstellungen
Da bist du mit MVC, option #2 ist aus der Frage, da unaufdringlich-Validierung wird automatisch initialisieren des Formulars. Lassen Sie uns also die option 3 geht vorwärts - das Ziel ist hier, um die Einstellungen anpassen, auf der form.
Standardverhalten Außer Kraft Setzen
Den Standard-Methoden, die wir ändern wollen, sind
highlight
undunhighlight ist
die highlight ungültige Felder oder verwerfen der änderungen durch das markieren der option, jeweils. Hier ist Ihre Standard-Verhalten nach dem source-code:So haben Sie ein paar Optionen, auch hier.
Option 1 - Ersetzen, Großhandel
Diese route ist ziemlich einfach. Schreiben Sie einfach, was Sie wollen dort. Vielleicht Samen aus dem source-code, vielleicht Ihr eigenes Ding machen.
Option 2 - Wrap-Funktionen
Dieser ist weniger aufdringlich daher wohl vorzuziehen, in den meisten Fällen.
Da letztendlich werden Sie und ersetzen Sie den Wert von
valSettings.highlight
, benötigen Sie Zugriff auf einen sauberen unverfälschten version der ursprünglichen Funktion. Sie können Ihre eigenen oder greifen Sie einen aus der globalen StandardwerteIn Bezug auf die Verpackung von JavaScript-Funktionen, es gibt ein paar Beispiele hier, hier, und hier). Hier ist ein analysiertes Beispiel unten aus einer von denen, die mithelfen
this
Kontext über die Funktion fordert, die Erhaltung der stelligkeit der Argumente, die übergeben wird, und bestehen der return-Wert:Dann werden Sie auch haben, um schnell zu definieren, was zusätzliche Verhalten, das Sie möchten, um das Feuer, sobald der Anruf getätigt wird. In diesem Fall finden wir den nächsten übergeordneten
div
auf das element, und aktualisieren Sie es Klassen wie diese:Alles in allem (siehe was ich dort Tat)
Also, wenn wir vereinen alle der oben genannten Funktionen, es sollte in etwa so Aussehen:
Arbeiten Demo in Stapel Schnipsel und jsFiddle
JS:
CSS:
HTML: