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

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?

$('#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).

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.

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

if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}

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');
    }
});

wie kommt es, dass niemand erwähnt

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

scheint mir eher jquery-like

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');
}});

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

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');
     }
});

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');
    }
});

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
    }
}

$(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

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.

<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>// :)

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>

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.

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

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