Überprüfen Sie mit jQuery, ob die Eingaben leer sind

491

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?

Keith Donegan
quelle

Antworten:

764
$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    }
});

Und Sie müssen nicht unbedingt sehen .lengthoder sehen, ob >0eine leere Zeichenfolge ohnehin als falsch ausgewertet wird, aber wenn Sie dies aus Gründen der Lesbarkeit möchten:

$('#apply-form input').blur(function()
{
    if( $(this).val().length === 0 ) {
        $(this).parents('p').addClass('warning');
    }
});

Wenn Sie sicher sind, dass es immer mit einem Textfeldelement funktioniert, können Sie es einfach verwenden this.value.

$('#apply-form input').blur(function()
{
      if( !this.value ) {
            $(this).parents('p').addClass('warning');
      }
});

Beachten Sie außerdem, dass $('input:text')mehrere Elemente erfasst, ein Kontext angegeben oder das thisSchlüsselwort verwendet wird, wenn Sie nur auf ein einzelnes Element verweisen möchten (vorausgesetzt, die Nachkommen / untergeordneten Elemente des Kontexts enthalten ein Textfeld).

meder omuraliev
quelle
2
Ich denke, dass es besser funktioniert, wenn Sie von: if (! $ (This) .val ()) zu: if (! $ (This) .val () && $ (this) .val ()! = "" Wechseln. )
Alfasin
2
$ (this) .val (). Länge <1
Tomas
3
YourObjNameSpace.yourJqueryInputElement.keyup (Funktion (e) {if ($. Trim ($ (this) .val ())) {// getrimmter Wert ist Wahrheit} else {// getrimmter Wert ist Falsey}}
Frankie Loscavio
Ich überprüfe die Länge von Feldern so selten, dass ich sie völlig übersehen habe .val().lengthund stattdessen .length()für das Element selbst verwendet habe.
Tass
Für mehr Robustheit würde ich am Ende auch .trim () hinzufügen
HQuser
155

Jeder hat die richtige Idee, aber ich möchte etwas expliziter sein und die Werte kürzen.

$('#apply-form input').blur(function() {
     if(!$.trim(this.value).length) { // zero-length string AFTER a trim
            $(this).parents('p').addClass('warning');
     }
});

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.

Alex Sexton
quelle
18
Absolut richtig. Das Zuschneiden ist erforderlich, insbesondere bei Verwendung kniffliger WYSIWYG-Editoren (wie z. B. jWYSIWYG).
Josh Smith
Darf ich vorschlagen, den Wert in val zu ändern ---> if (! $. Trim (this.val) .length) {// Zeichenfolge mit der Länge Null NACH einem trim $ (this) .parents ('p'). AddClass (' Warnung'); }
K. Kilian Lindberg
this.valwäre undefinedda. 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.
Alex Sexton
33

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.

$('#signupform').submit(function() {
    var errors = 0;
    $("#signupform :input").map(function(){
         if( !$(this).val() ) {
              $(this).parents('td').addClass('warning');
              errors++;
        } else if ($(this).val()) {
              $(this).parents('td').removeClass('warning');
        }   
    });
    if(errors > 0){
        $('#errorwarn').text("All fields are required");
        return false;
    }
    // do the ajax..    
});
zogdeal
quelle
20
if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}
Graviton
quelle
Nicht gefangener TypeError: Eigenschaft 'Länge' von undefined kann nicht gelesen werden
Chuck D
@ChuckD Ich war gleichen Fehler und ich herausgefunden ich fehlte $in if (('input:text').val().length == 0) {es sein sollteif ($('input:text').val().length == 0) {
fWd82
16

Sie können auch verwenden ..

$('#apply-form input').blur(function()
{
    if( $(this).val() == '' ) {
          $(this).parents('p').addClass('warning');
    }
});

Wenn Sie Zweifel an Leerzeichen haben, versuchen Sie es ..

$('#apply-form input').blur(function()
{
    if( $(this).val().trim() == '' ) {
          $(this).parents('p').addClass('warning');
    }
});
Zigri2612
quelle
9

wie kommt es, dass niemand erwähnt

$(this).filter('[value=]').addClass('warning');

scheint mir eher jquery-like

Jamie Pate
quelle
3
Dies funktioniert nicht in jQuery 1.9+, da sie die Funktionsweise des Auswahlfilters geändert haben. Jsfiddle.net/6r3Rk
Wick
2
Ich schlage $ (this) .not ('[value]'). AddClass ('warning') für 1.9 vor. Jsfiddle.net/znZ9e
Jamie Pate
1
Ich glaube, das testet nur, ob das Feld mit einem Wertattribut begonnen hat. Der tatsächliche Wert des Formularfelds wird nicht so getestet, wie Sie es für die Validierung benötigen würden. jsfiddle.net/T89bS ... das Feld ohne Wertattribut wird mit Lachs geohrfeigt, unabhängig davon, ob Sie etwas eingeben .
Wick
5

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).

    $("#inputname").keyup(function() {

if (!this.value) {
    alert('The box is empty');
}});
Ouss Ama
quelle
4

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

Dave Ward
quelle
3

Der :emptyPseudo-Selektor wird verwendet, um festzustellen, ob ein Element keine untergeordneten Elemente enthält. Überprüfen Sie den Wert:

$('#apply-form input').blur(function() {
     if(!this.value) { // zero-length string
            $(this).parents('p').addClass('warning');
     }
});
CMS
quelle
3

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:

$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    } else if ($(this).val()) {
          $(this).parents('p').removeClass('warning');
    }
});
Xorinzor
quelle
3

function checkForm() {
  return $('input[type=text]').filter(function () {
    return $(this).val().length === 0;
  }).length;
}

Vanille
quelle
2

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.

YourObjNameSpace.yourJqueryInputElement.keyup(function (e){
   if($.trim($(this).val())){
       // trimmed value is truthy meaning real characters are entered
    }else{
       // trimmed value is falsey meaning empty input excluding just whitespace characters
    }
}
Frankie Loscavio
quelle
2
$(function() {
  var fields = $('#search_form').serializeArray();
  is_blank = true;
  for (var i = 0; i < fields.length; i++) {
    // excluded fields
    if ((fields[i].name != "locale") && (fields[i].name != "utf8")) {
      if (fields[i].value) {
        is_blank = false;
      }
    }
  }
  if (is_blank) {
    $('#filters-button').append(': OFF');
  }
  else {
    $('#filters-button').append(': ON');
  }
});

Überprüfen Sie, ob alle Felder leer sind, und hängen Sie ON oder OFF an Filter_button an

Mauro
quelle
1

Sie können so etwas ausprobieren:

$('#apply-form input[value!=""]').blur(function() {
    $(this).parents('p').addClass('warning');
});

Das .blur()Ereignis wird nur auf die Eingaben mit leeren Werten angewendet.

Konstantine Kalbazov
quelle
Gute Lösung, aber seien Sie gewarnt, dies funktioniert nur, wenn die Eingabe beim Funktionsaufruf nicht leer ist und auch nur, wenn der Wert im Attribut "Wert" der Eingabe gespeichert ist.
Fabian von Ellerts
0
<script type="text/javascript">
$('input:text, input:password, textarea').blur(function()
    {
          var check = $(this).val();
          if(check == '')
          {
                $(this).parent().addClass('ym-error');
          }
          else
          {
                $(this).parent().removeClass('ym-error');  
          }
    });
 </script>// :)
Maher
quelle
Sie müssen wahrscheinlich auch das Leerzeichen kürzen.
Raptor
0

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>

Atlantiz
quelle
2
Und alle Browser unterstützen dies nicht ... Sie müssen eine js-Prüfung UND eine serverseitige Prüfung
hinzufügen
Fragetitel
0

Große Sammlung von Antworten, möchte hinzufügen, dass Sie dies auch mit dem :placeholder-shownCSS-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.

if ($('input#cust-descrip').is(':placeholder-shown')) {
  console.log('Empty');
}

$('input#cust-descrip').on('blur', '', function(ev) {
  if (!$('input#cust-descrip').is(':placeholder-shown')) {
    console.log('Has Text!');
  }
  else {
    console.log('Empty!');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="form-control" id="cust-descrip" autocomplete="off" placeholder="Description">

Sie können auch die Selektoren :validund verwenden, :invalidwenn Sie Eingaben haben, die erforderlich sind. Sie können diese Selektoren verwenden, wenn Sie das erforderliche Attribut für eine Eingabe verwenden.

Mark Carpenter Jr.
quelle
0

Eine saubere Nur-CSS-Lösung wäre:

input[type="radio"]:read-only {
        pointer-events: none;
}
Dion
quelle