Sprawdź, czy dane wejściowe są puste, używając jQuery

Mam formularz, w którym chciałbym, aby wszystkie pola były wypełnione. Jeśli pole zostanie kliknięte, a następnie nie wypełnione, chciałbym wyświetlić czerwone tło.

Oto mój kod:

$('#apply-form input').blur(function () {
  if ($('input:text').is(":empty")) {
    $(this).parents('p').addClass('warning');
  }
});

Stosuje klasę ostrzegawczą niezależnie od tego, czy pole jest wypełnione czy nie.

Co ja robię źle?

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

I niekoniecznie potrzebujesz .lengthani nie widzisz, czy jest tak, >0ponieważ pusty ciąg i tak zwraca wartość false, ale jeśli chcesz to dla celów czytelności:

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

Jeśli jesteś pewien, że zawsze będzie działać na elemencie pola tekstowego, możesz po prostu użyć this.value.

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

Należy również pamiętać, że $('input:text')pobiera wiele elementów, określa kontekst lub używa thissłowa kluczowego, jeśli chcesz po prostu odwołać się do samotnego elementu (pod warunkiem, że istnieje jedno pole tekstowe w potomkach / potomkach kontekstu).

Każdy ma dobry pomysł, ale lubię być bardziej wyraźny i obcinać wartości.

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

jeśli nie użyjesz .length, wtedy wpis „0” może zostać oznaczony jako zły, a wpis 5 spacji może zostać oznaczony jako ok bez $ .trim. Powodzenia.

Robienie tego przy rozmyciu jest zbyt ograniczone. Zakłada się, że skupiono się na polu formularza, więc wolę to zrobić po przesłaniu i odwzorować dane wejściowe. Po latach radzenia sobie z fantazyjnymi rozmyciami, skupieniem itp. Sztuczkami, uproszczenie sprawi, że będzie to bardziej użyteczne tam, gdzie się liczy.

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

możesz użyć również ..

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

jeśli masz wątpliwości co do spacji, spróbuj ...

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

dlaczego nikt nie wspomniał

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

wydaje mi się bardziej jquery

Zdarzenie keyup wykryje, czy użytkownik również wyczyścił pole (tj. Backspace podnosi zdarzenie, ale backspace nie podnosi zdarzenia naciśnięcia klawisza w IE)

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

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

Zastanów się nad użyciem wtyczki sprawdzania poprawności jQuery . Może być nieco przesadny w przypadku prostych wymaganych pól, ale jest wystarczająco dojrzały, aby obsłużyć skrajne przypadki, o których nawet jeszcze nie pomyślałeś (ani nikt z nas, dopóki ich nie napotkamy).

Możesz otagować wymagane pola klasą „wymagane”, uruchomić $ („formularz”). Validate () w $ (document) .ready () i to wszystko.

Jest nawet hostowany w Microsoft CDN, dla szybkiej dostawy: http://www.asp.net/ajaxlibrary/CDN.ashx

:emptyPseudo-selektor służy do sprawdzenia, czy element nie zawiera Childs, należy sprawdzić wartość:

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

Jest jeszcze jedna rzecz, o której warto pomyśleć: obecnie może dodać klasę ostrzegawczą tylko wtedy, gdy jest pusta, co powiesz na usunięcie klasy ponownie, gdy formularz nie jest już pusty.

lubię to:

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

Oto przykład użycia klucza dla wybranego wejścia. Używa również przycinania, aby upewnić się, że ciąg tylko białych znaków nie wyzwala prawdziwej odpowiedzi. Jest to przykład, którego można użyć do uruchomienia pola wyszukiwania lub czegoś związanego z tego typu funkcjonalnością.

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

Sprawdź, czy wszystkie pola są puste i dodaj ON lub OFF na przycisku Filter_button

Możesz spróbować czegoś takiego:

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

Zastosuje .blur()zdarzenie tylko do danych wejściowych o pustych wartościach.

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

W HTML 5 możemy użyć nowej „wymaganej” funkcji, wystarczy dodać ją do tagu, która ma być wymagana:

<input type='text' required>

Świetny zbiór odpowiedzi, chciałbym dodać, że możesz to zrobić również za pomocą :placeholder-shownselektora CSS. Trochę czystsze w użyciu IMO, szczególnie jeśli już używasz jQ i masz symbole zastępcze na swoich danych wejściowych.

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

Możesz także skorzystać z selektorów :validi :invalid, jeśli masz wymagane dane wejściowe. Możesz użyć tych selektorów, jeśli używasz wymaganego atrybutu na wejściu.

Czyste rozwiązanie tylko dla CSS:

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