Ich habe ein Formular, in das alle Felder ausgefüllt werden sollen. Wenn ein Feld angeklickt und dann nicht ausgefüllt wird, möchte ich einen roten Hintergrund anzeigen.
Hier ist mein Code:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
Es wendet die Warnklasse an, unabhängig davon, welches Feld ausgefüllt wird oder nicht.
Was mache ich falsch?
jquery
validation
Keith Donegan
quelle
quelle
Antworten:
Und Sie müssen nicht unbedingt sehen
.length
oder sehen, ob>0
eine leere Zeichenfolge ohnehin als falsch ausgewertet wird, aber wenn Sie dies aus Gründen der Lesbarkeit möchten:Wenn Sie sicher sind, dass es immer mit einem Textfeldelement funktioniert, können Sie es einfach verwenden
this.value
.Beachten Sie außerdem, dass
$('input:text')
mehrere Elemente erfasst, ein Kontext angegeben oder dasthis
Schlüsselwort verwendet wird, wenn Sie nur auf ein einzelnes Element verweisen möchten (vorausgesetzt, die Nachkommen / untergeordneten Elemente des Kontexts enthalten ein Textfeld).quelle
.val().length
und stattdessen.length()
für das Element selbst verwendet habe.Jeder hat die richtige Idee, aber ich möchte etwas expliziter sein und die Werte kürzen.
Wenn Sie .length nicht verwenden, kann ein Eintrag von '0' als fehlerhaft markiert werden, und ein Eintrag von 5 Leerzeichen kann ohne $ .trim als ok markiert werden. Viel Glück.
quelle
this.val
wäreundefined
da. Es müsste sein$(this).val()
- aber das hat keinen browserübergreifenden Vorteil, deshalb habe ich es aus Gründen der Kürze / Geschwindigkeit weggelassen.Es ist zu begrenzt, es auf Unschärfe zu tun. Es wird davon ausgegangen, dass der Fokus auf dem Formularfeld lag, daher ziehe ich es vor, dies beim Senden zu tun und die Eingabe zuzuordnen. Nach Jahren des Umgangs mit ausgefallenen Unschärfe-, Fokus- usw. Tricks führt eine einfachere Darstellung zu einer besseren Benutzerfreundlichkeit, wenn es darauf ankommt.
quelle
quelle
$
inif (('input:text').val().length == 0) {
es sein sollteif ($('input:text').val().length == 0) {
Sie können auch verwenden ..
Wenn Sie Zweifel an Leerzeichen haben, versuchen Sie es ..
quelle
wie kommt es, dass niemand erwähnt
scheint mir eher jquery-like
quelle
Das Keyup-Ereignis erkennt, ob der Benutzer das Feld ebenfalls deaktiviert hat (dh die Rücktaste löst das Ereignis aus, die Rücktaste löst das Tastendruckereignis im IE jedoch nicht aus).
quelle
Verwenden Sie stattdessen das jQuery-Validierungs-Plugin . Es mag für einfache Pflichtfelder etwas übertrieben sein, aber es ist ausgereift genug, um Randfälle zu behandeln, an die Sie noch nicht einmal gedacht haben (und keiner von uns würde es tun, bis wir auf sie gestoßen sind).
Sie können die erforderlichen Felder mit der Klasse "erforderlich" versehen, ein $ ('Formular'). Validate () in $ (document) .ready () ausführen und das ist alles, was Sie brauchen.
Es wird sogar auf dem Microsoft CDN gehostet, um eine schnelle Lieferung zu ermöglichen: http://www.asp.net/ajaxlibrary/CDN.ashx
quelle
Der
:empty
Pseudo-Selektor wird verwendet, um festzustellen, ob ein Element keine untergeordneten Elemente enthält. Überprüfen Sie den Wert:quelle
Es gibt noch eine andere Sache, über die Sie nachdenken sollten: Derzeit kann die Warnklasse nur hinzugefügt werden, wenn sie leer ist. Wie wäre es, wenn Sie die Klasse erneut entfernen, wenn das Formular nicht mehr leer ist.
so was:
quelle
quelle
Hier ist ein Beispiel mit Keyup für den ausgewählten Eingang. Es wird auch ein Trimm verwendet, um sicherzustellen, dass eine Folge von nur Leerzeichen keine wahrheitsgemäße Antwort auslöst. Dies ist ein Beispiel, mit dem ein Suchfeld oder etwas in Verbindung mit dieser Art von Funktionalität gestartet werden kann.
quelle
Überprüfen Sie, ob alle Felder leer sind, und hängen Sie ON oder OFF an Filter_button an
quelle
Sie können so etwas ausprobieren:
Das
.blur()
Ereignis wird nur auf die Eingaben mit leeren Werten angewendet.quelle
quelle
Mit HTML 5 können wir eine neue Funktion "erforderlich" verwenden, indem Sie sie einfach dem Tag hinzufügen, das Sie benötigen möchten, wie:
<input type='text' required>
quelle
Große Sammlung von Antworten, möchte hinzufügen, dass Sie dies auch mit dem
:placeholder-shown
CSS-Selektor tun können . Ein wenig sauberer für die Verwendung von IMO, insbesondere wenn Sie bereits jQ verwenden und Platzhalter für Ihre Eingaben haben.Sie können auch die Selektoren
:valid
und verwenden,:invalid
wenn Sie Eingaben haben, die erforderlich sind. Sie können diese Selektoren verwenden, wenn Sie das erforderliche Attribut für eine Eingabe verwenden.quelle
Eine saubere Nur-CSS-Lösung wäre:
quelle