it-swarm.com.de

Ü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 Warnungsklasse an, unabhängig davon, ob das Feld ausgefüllt ist oder nicht.

Was mache ich falsch?

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

Und Sie brauchen nicht unbedingt .length oder sehen, ob es >0 ist, da eine leere Zeichenfolge ohnehin zu false ausgewertet wird, wenn Sie dies jedoch 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 ein Textfeldelement immer bearbeitet wird, können Sie einfach this.value verwenden.

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

Beachten Sie auch, dass $('input:text') mehrere Elemente erfasst, einen Kontext angibt oder das Schlüsselwort this verwendet, wenn Sie nur einen Verweis auf ein einzelnes Element wünschen (vorausgesetzt, es gibt ein Textfeld in den Nachkommen/Kindern des Kontextes).

693
meder omuraliev

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

$('#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 schlecht markiert werden, und ein Eintrag von 5 Leerzeichen könnte ohne $ .trim als ok markiert werden. Viel Glück.

145
Alex Sexton

Bei Unschärfe ist es zu begrenzt. Es wird davon ausgegangen, dass der Fokus auf dem Formularfeld lag. Daher ziehe ich es vor, es beim Senden zu machen und die Eingabe durchzugehen. Nach jahrelangem Umgang mit ausgefallenen Unschärfen, Fokussierungen usw. führt die Vereinfachung der Dinge zu mehr Benutzerfreundlichkeit, wenn es wichtiger ist.

$('#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..    
});
30
drewdeal
if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}
18
Graviton

du kannst auch verwenden ..

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

wenn Sie Zweifel an Leerzeichen haben, dann versuchen Sie es ..

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

wie kommt es, dass niemand erwähnt hat?

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

scheint mir jquery-like

8
Jamie Pate

Das Keyup-Ereignis erkennt, ob der Benutzer das Kontrollkästchen ebenfalls deaktiviert hat (d. H. Rücktaste löst das Ereignis aus, aber Rücktaste löst das Tastendruckereignis im IE nicht aus)

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

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

Verwenden Sie stattdessen das jQuery-Validierungs-Plugin . Es kann für einfache erforderliche Felder ein wenig übertrieben sein, aber es ist so reif, dass es Edge-Fälle behandelt, an die Sie noch nicht einmal gedacht haben (und auch keiner von uns, bis wir auf sie gestoßen sind).

Sie können die erforderlichen Felder mit der Klasse "required" kennzeichnen, ein $ ('form'). 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

4
Dave Ward

Mit dem Pseudo-Selector :empty wird überprüft, ob ein Element keine untergeordneten Elemente enthält. Sie sollten den Wert überprüfen:

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

Es gibt noch eine andere Sache, über die Sie nachdenken möchten. Derzeit kann die Warnklasse nur hinzugefügt werden, wenn sie leer ist. Wie wäre es, wenn Sie die Klasse wieder 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');
    }
});
3
xorinzor

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

3
Vanilla
$(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');
  }
});

Prüfen Sie, ob alle Felder leer sind und hängen Sie an Filter_button an oder aus

2
Mauro

Hier ist ein Beispiel mit Keyup für die ausgewählte Eingabe. Es wird auch ein Beschnitt verwendet, um sicherzustellen, dass eine Folge von Leerzeichen keine wahrheitsgemäße Antwort auslöst. Dies ist ein Beispiel, mit dem ein Suchfeld oder etwas in Bezug auf diese 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
    }
}
2

Sie können so etwas versuchen:

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

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

1

Große Sammlung von Antworten, möchte ich 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.

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 :valid und :invalid verwenden, wenn Sie die erforderlichen Eingaben haben. Sie können diese Selektoren verwenden, wenn Sie das erforderliche Attribut für eine Eingabe verwenden.

0

Mit HTML 5 können wir eine neue Funktion "required" verwenden, die einfach dem Tag hinzugefügt wird, den Sie benötigen, wie:

<input type='text' required>

0
Atlantiz
<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>// :)
0
Maher