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

491

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?

Keith Donegan
źródło

Odpowiedzi:

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

meder omuraliev
źródło
2
Myślę, że będzie działać lepiej, jeśli zmienisz z: if (! $ (This) .val ()) na: if (! $ (This) .val () && $ (this) .val ()! = "" )
alfasin
2
$ (this) .val (). length <1
Tomas
3
YourObjNameSpace.yourJqueryInputElement.keyup (function (e) {if ($. Trim ($ (this) .val ()))) {// wartość przycięta to prawda} else {// wartość przycięta to falsey}}
Frankie Loscavio
Sprawdzam długość pól tak rzadko, że całkowicie przeoczyłem .val().lengthi zamiast .length()tego używałem samego elementu.
Tass
Dla większej niezawodności dodałbym także .trim () na końcu
HQuser
155

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.

Alex Sexton
źródło
18
Całkowita racja. Przycinanie jest konieczne, szczególnie przy użyciu wybrednych edytorów WYSIWYG (na przykład jWYSIWYG).
Josh Smith
Czy mogę zasugerować zmianę wartości na val ---> if (! $. Trim (this.val) .length) {// ciąg o zerowej długości PO przycięciu $ (this) .parents ('p'). AddClass (' ostrzeżenie'); }
K. Kilian Lindberg,
this.valbędzie undefinedtam Musiałoby tak być $(this).val()- ale nie ma w tym żadnej przewagi w różnych przeglądarkach, więc pominąłem to ze względu na zwięzłość / szybkość.
Alex Sexton
33

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..    
});
Drawdeal
źródło
20
if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}
Grawiton
źródło
Uncaught TypeError: Nie można odczytać właściwości „length” undefined
Chuck D
@ChuckD byłem coraz ten sam błąd i zorientowali się, że brakuje $w if (('input:text').val().length == 0) {powinno byćif ($('input:text').val().length == 0) {
fWd82
16

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');
    }
});
Zigri2612
źródło
9

dlaczego nikt nie wspomniał

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

wydaje mi się bardziej jquery

Jamie Pate
źródło
3
Nie działa to w jQuery 1.9+, ponieważ zmieniono sposób działania filtra selektora. Jsfiddle.net/6r3Rk
Wick
2
Sugeruję $ (this) .not ('[wartość]'). AddClass ('ostrzeżenie') dla 1.9 jsfiddle.net/znZ9e
Jamie Pate
1
Uważam, że sprawdza tylko, czy pole zaczynało się od atrybutu wartości. Nie testuje rzeczywistej wartości pola formularza, tak jakbyś potrzebował do weryfikacji. jsfiddle.net/T89bS ... pole bez atrybutu wartości zostaje policzone z łososiem, niezależnie od tego, czy coś w nim wpiszesz.
Wick
5

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');
}});
Ouss Ama
źródło
4

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

Dave Ward
źródło
3

: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');
     }
});
CMS
źródło
3

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');
    }
});
Xorinzor
źródło
3

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

Wanilia
źródło
2

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
    }
}
Frankie Loscavio
źródło
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');
  }
});

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

Mauro
źródło
1

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.

Konstantine Kalbazov
źródło
Dobre rozwiązanie, ale ostrzegamy, że działa to tylko wtedy, gdy dane wejściowe nie są puste po wywołaniu funkcji, a także tylko wtedy, gdy wartość jest zapisana w atrybucie „wartość” wejścia.
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
źródło
Prawdopodobnie musisz również przyciąć białe znaki.
Raptor
0

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

<input type='text' required>

Atlantiz
źródło
2
I wszystkie przeglądarki nie obsługują tego ... Musisz dodać czek js ORAZ czek
serwerowy
Tytuł pytania: „Sprawdź, czy dane wejściowe są puste za pomocą jQuery”
JoshYates1980,
0

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

Mark Carpenter Jr
źródło
0

Czyste rozwiązanie tylko dla CSS:

input[type="radio"]:read-only {
        pointer-events: none;
}
Dion
źródło