Pytanie w sprawie javascript, jquery, jquery-selectors – Jak wybrać puste wejścia (value = „”) za pomocą jQuery

47

Jak mogę sprawdzić puste wartości (required) pola wejściowe w sekcji, a następnie dodaj do nich klasę na zdarzeniu, używając jQuery? Do tej pory próbowałem:

jQuery("#sender_container input.required").val("").addClass("error");

Ale to wydaje sięZESTAW wartość, zamiast ją sprawdzać. Jakieś pomysły?

Twoja odpowiedź

8   odpowiedzi
10
$('input:text[value=]','#sender_container').addClass('error');

PRÓBNY

To nie zadziała w jQuery 1.9+, zobaczjquery.com/upgrade-guide/1.9/#attr-versus-prop- personne3000
3
$('#sender_container input.required[value=""]').addClass('error')
To działa tylko dla atrybutu value. gdoron
Właściwie to w ogóle nie zadziała, między wejściem a selektorem atrybutu jest niepoprawna przestrzeń ... :) Wyszuka dzieci wejścia z atrybutem pustej wartości, wejście nie może mieć dzieci ... gdoron
+ 1-oops zapomnij o tym, że edytuję moje ans Parv Sharma
tak to powinno działać Parv Sharma
Dzięki, Parv. Twój kod powinien teraz działać dla wszystkich elementów potomnych elementu zawierającego o identyfikatorze sender_container, który jest polem wprowadzania wymaganej klasy i którego wartość jest pusta, poprawna? Richard Harris
1
jQuery('#sender_container input.required[value=""]').addClass("error");

Możesz spróbować tego:

$('input:not([value!=""])').addClass('error');

PRÓBNY

Uwaga: Ta odpowiedź nie powinna być używana, a jedynym powodem, dla którego nie została usunięta, jest to, że można ją odczytywać z pliku.

@gdoron yup, nigdy go nie użyje. powinienem usunąć ten post lub zachować tutaj, aby poinformować o tym innego thecodeparadox
@ FelixKling. To dziwne, wygląda na to:not[value...] sprawdź bieżący stan, $ thecodeparadox, zauważ, że jest to zły wybór. gdoron
Dodałem notatkę, dzięki czemu nie będzie więcej przesłanek ... :) gdoron
To działa tylko dla atrybutu value. gdoron
87
jQuery("#sender_container input.required").filter(function() {
    return !this.value;
}).addClass("error");​

Dlaczego musisz korzystaćfilter i nie[value=""] możesz zobaczyćto DEMO

Powodem jest: selektory atrybutów sprawdzają stan początkowy elementu, a nie stan bieżący. (zauważ, że możesz zmienić stan „początkowy” za pomocąattr funkcja, ale to zła praktyka, powinieneś zawsze używaćprop)

Więc jeśli zmienisz wartość wejściową, bieżąca wartość nie wpłynie na selektor atrybutu. nie mądry ...:)

Uwagi:

.val() zwraca wartość elementu formularza i łamie łańcuch jQuery,$('selector').val().addClass('foo') Błąd, wartością zwracaną jest ciągnumer

.val(valueToSet) zestawy wartość elementu formularza i nie łamie łańcucha jQuery.
$('selector').val("some value").addClass('foo') - Ważny, zwracaną wartością jest jQuery

Dzięki, ale działa to tylko wtedy, gdy WSZYSTKIE wejścia są puste. Ale jeśli mam 2 wymagane pola, a jedno ma wartość, a drugie jest puste, nic się nie dzieje. Richard Harris
@ RichardHarris.Lub to demo użył css codeparadox gdoron
@ personne3000, jeśli nie jest udokumentowany jako oficjalnie wspierany, nigdy bym go nie używał, ponieważ wygląda nieco hacky. Ale jeśli tak, to świetny sposób! Dziękuję, że udowodniłeś, że się mylę. gdoron
@ RichardHarris. Również w tym przypadku powinno działać dobrze. w twoim kodzie jest coś innego. widziećto demo gdoron
0

Jeśli musisz wybrać tylko na podstawie początkowej wartości atrybutu danych wejściowych, to wykonasz następujące czynności:

var elements = $('#sender_container input.required[value=""]')

Ale pamiętaj, że to nie zadziała, jeślivalue atrybut nie jest obecny. Nie działa również dla bieżącej wartości wejściowej, jeśli została zmieniona przez użytkownika lub skrypt.

Jeśli chcesz uzyskać bieżącą wartość wejściową, której możesz użyćjqueryjestfilter funkcjonować:

var elements = $('#sender_container input.required').filter(function() {
  return this.value === '';

  // alternatively for "no value":
  // return !this.value;
})

Po wybraniujquery elementy, które możesz dodać do swojej klasy:

elements.addClass('error');
0

aby sprawdzić wszystkie pola, może to pomóc.

$('#sender_container [required]').each(function(index)
{
       if (!($(this).val())) $(this).addClass('error');
}

});
0
$field = $("#sender_container input.required");
if( ! $field.val())
{
    $field.addClass("error");
}

ten prosty sposób może zadziałać.

To działa ztylko jedno pole. gdoron
$ ("# sender_container input.required"). each (funkcja (if (! $ (this) .val ()) {$ (this) .addClass ("error");})) spróbuj tego. Nils
Następnie użyjfilter....:) gdoron
0

Dla tychinput.required nie działa, pisz jak poniżej:

jQuery('#sender_container input[required]').val("").addClass("error");

Powiązane pytania