jQuery-Validierung: Funktion, wenn eine bestimmte element gültig ist
Ich habe ein Formular, mit dem überprüft wird onsubmit-und onblur-mit dem jQuery Validation plugin. Im Formular habe ich ein element, die deaktiviert werden sollten, bis ein anderes element angezeigt wird, gültig. Ich bin auf der Suche nach einem Weg, um eine Funktion ausführen (löschen deaktiviert attr), wenn ein bestimmtes element gültig ist.
Den code ist unten aufgeführt.
Wenn #klas gültig ist, #ll-naam aktiviert werden soll. Der andere Weg herum, wenn #klas ist ungültig, #ll-naam sollte deaktiviert werden, so dass Benutzer kann nicht jede Eingabe.
Ich kämpfte für Stunden versuchen, die richtige Lösung zu finden, aber noch die Doku noch google scheint meine Freundin diese Zeit. Gibt es jemanden, der helfen könnte, mich aus?
Vielen Dank im Voraus!
Den jQuery:
$("#newAp").validate({
validClass: 'succes',
ignore: '#opmerking',
errorContainer: '#newap-error',
rules: {
docent: {
required: true,
minlength: 4,
remote: "handlers/validationInSqlArray.php"
},
'vak': {
required: true,
remote: "handlers/validationInSqlArray.php"
},
'klas': {
required: true,
remote: "handlers/validationInSqlArray.php",
valid: function(element){
$('#ll-naam').removeAttr("disabled");
$("#ll-naamErrorLabel").hide();
$('#ll-naam').focus();
}
},
'll-naam': {
required: true
},
'datum': {
required: true
}
},
messages: {
docent: {
required: "Vul uw achternaam in",
remote: "Alleen namen uit de suggestielijst zijn toegestaan",
minlength: jQuery.validator.format("Vul minimaal {0} tekens in."),
},
vak: {
required: "U dient een vak in te vullen",
remote: "Alleen vakken uit de suggestielijst zijn toegestaan",
},
klas: {
required: "Vul een klas in",
remote: "Alleen klassen uit de suggestielijst zijn toegestaan"
},
'll-naam': "Voer de naam van de leerling in",
datum: "Selecteer een terugkomdatum"
}
});
Form:
<form method="post" action="" id="newAp" class="form">
<div class="alert alert-error" id="newap-error">
<p>Corrigeer de rood gemarkeerde velden</p>
</div>
<h2 class="form-title">Leerling aanmelden</h2>
<label for="docent">Docent</label>
<input type="text" name="docent" id="docent" placeholder="Vul uw achternaam in"/>
<label for="vak">Vak</label>
<input type="text" name="vak" id="vak" placeholder="Vul de naam van het vak in" />
<label for="klas">Klas (stamgroep)</label>
<input type="text" name="klas" id="klas" placeholder="Klas van de leerling" value="" />
<label for="ll-naam">Leerling</label>
<input type="text" name="ll-naam" id="ll-naam" placeholder="Naam van de leerling" disabled />
<label class="error" id="ll-naamErrorLabel">Vul eerst de klas in</label>
<label for="opmerking">Opmerking</label>
<textarea name="opmerking" name="opmerking" placeholder="Opmerking voor de surveillant."> </textarea>
<input type="hidden" name="opmerking_ph" value="Opmerking voor de surveillant." />
<label for="date">Terugkom datum</label>
<input type="text" name="datum" id="datum" readonly='true' placeholder="Klik om datum te selecteren" />
<input type="submit" class="submit" value="Opslaan" />
</form>
Du musst angemeldet sein, um einen Kommentar abzugeben.
jsFiddle Beispiel - http://jsfiddle.net/Qgq23/2/
Können Sie mit der "markieren" und "unhighlight ist" - Methoden von jQuery.überprüfen.
Mit der Definition einer callback zu "markieren", können Sie handeln, wenn Sie ein Feld ungültig ist; dafür deaktivieren alle anderen verwandten Bereich. Mit "unhighlight ist", können Sie handeln, wenn Sie ein Feld gültig ist - und damit alle anderen verwandten Bereich.
Aus der jQuery.überprüfen Bedienungsanleitung:
Statt ausblenden und dann verblassen in ein ungültiges element, können Sie die
element
's name-Attribut und deaktivieren Sie die anderen verwandten Bereich nach dem element auslösen-das highlight-event.In der gleichen Weise, die Sie definieren können, das Gegenteil davon als "unhighlight ist", und aktivieren Sie die deaktivierten Felder nach dem Feld, das ist jetzt aktiviert.
Mein Vorschlag, btw, wäre ein benutzerdefiniertes Attribut hinzufügen, um Ihre input-tags, die angeben, die anderen Felder hängen von diesem einen, und aktivieren/deaktivieren Sie die Felder entsprechend zu. So minimieren Sie den erforderlichen code für die highlight/unhighlight ist Ereignisse und erstellen Sie eine wiederverwendbare code für Ihre Zukunft Formen.
Überprüfen Sie die Bedienungsanleitung für die Besonderheiten im Zusammenhang mit Ihrem problem.
element
Sie bekommen nicht die ID des Elements, es ist das jQuery-Objekt des Elements. wenn Sie möchten, um die ID davon, sollten Sie versuchenif (element.attr("id") == "klas") { }