JQuery kullanarak boş metin girişi seçme

103

JQuery kullanarak boş metin kutularını nasıl tanımlarım? Mümkünse, seçicileri kullanarak yapmak istiyorum. Ayrıca, bunu kullanmak istediğim gerçek kodda tüm metin girişlerini seçmek istemediğim için id'yi seçmeliyim.

Aşağıdaki iki kod örneğimde, birincisi, kullanıcı tarafından "txt2" metin kutusuna yazılan değeri doğru bir şekilde gösterir. İkinci örnek, boş bir metin kutusu olduğunu tanımlar, ancak onu doldurursanız, yine de boş kabul eder. Bu neden?

Bu sadece seçiciler kullanılarak yapılabilir mi?

Bu kod, "txt2" metin kutusundaki değeri bildirir:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    alert($('[id=txt2]').val());
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>

Bu kod, "txt2" metin kutusunu her zaman boş olarak bildirir:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    if($('[id^=txt][value=""]').length > 0) {
                        if (!confirm("Are you sure you want to submit empty fields?")) {
                            if (event.preventDefault) {
                                event.preventDefault();
                            } else {
                                event.returnValue = false;
                            }
                        }
                    }
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>

jquery css-selectors

— Cros
kaynak

6

'[Value =]' kullanıcı girdisini yoksayıp yalnızca kaynakta ne olduğunu kontrol edip etmediğini bilen var mı?

— Cros,

Bu iş için boş filtre yapıldığı konusunda haklı mıyım? $ ('input [tür = metin]: boş']. doStuff ();

— Antony Carthy

1

belgeleri okuyun - docs.jquery.com/Selectors/empty . Boş, alt öğesi olmayan öğeler içindir, değeri DEĞİLDİR

— Russ Cam

196

Diğer yol

$('input:text').filter(function() { return $(this).val() == ""; });

veya

$('input:text').filter(function() { return this.value == ""; });

veya

// WARNING: if input element does not have the "value" attribute or this attribute was removed from DOM then such selector WILL NOT WORK! 
// For example input with type="file" and file does not selected.
// It's prefer to use "filter()" method.
// Thanks to @AaronLS
$('input:text[value=""]');

Çalışma Demosu

demodan kod

jQuery

 $(function() {

  $('#button').click(function() {

    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
    var string = "The blank textbox ids are - \n";

    emptyTextBoxes.each(function() {
      string += "\n" + this.id;
    });
    alert(string);
  });

});

— Russ Cam
kaynak

Benim için: if ($ ('[id ^ = txt]'). Filter (function () {return $ (this) .val () == "";}). Length> 0) {alert ('UYARI' ); }

— Cros

Son örneğinizi ikincimden ayıran nedir? Gerçek kodda tüm metin girişlerine bakmayacağım için id'yi seçmem gerekiyor. İkinci örneğim kullanıcı girdisiyle çalışmıyor, ancak sizinki çalışıyor.

— Cros,

1

Çalışma seçici şununla ilgili gibi görünüyor: seçicideki metin - çalışma demosunu açıp URL'ye eklerseniz / düzenlerseniz, kullanılan seçici ile oynayabilirsiniz. : Metnini çıkarırsanız, seçici artık $ ('input [value = ""]') ile bile doğru çalışmaz. Muhtemelen Sizzle seçici motorunda bir hata var, ancak araştıracak zamanım yok. Bu arada, seçicide bir öğe etiketi kullanmanızı öneririm, aksi takdirde her öğe, öznitelik değerleri için bir eşleşme olup olmadığını görmek için kontrol edilecektir.

— Russ Cam

3

Güzel cevap! Ancak, giriş öğesinin değerinin tam anlamıyla boş (boşluklar!) Olduğundan da emin olmak isteyebilirsiniz. Bu durumda boşlukları kırptığınızdan emin olun. Bunun gibi bir şey$('input:text').filter(function() { return $(this).val().trim() == ""; });

— Vineeth Pradhan

31

Öğe mevcutsa ancak bir değer özelliğine sahip değilse, [value=""]seçicinin bir değer özelliği bulamadığından çalışmayacağını unutmayın. Ancak .filter tekniği bu senaryoda işe yarar.

— AaronLS

26

Bunu kendi seçicinizi tanımlayarak da yapabilirsiniz:

$.extend($.expr[':'],{
    textboxEmpty: function(el){
        return $(el).val() === "";
    }
});

Ve sonra onlara şu şekilde erişin:

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection

— James Wiseman
kaynak

Performans konusunda biraz endişeliyim. Ama muhtemelen en kolay cevap!

— aliqandil

19

$(":text[value='']").doStuff();

?

Bu arada, aramanız:

$('input[id=cmdSubmit]')...

aşağıdakilerle büyük ölçüde basitleştirilebilir ve hızlandırılabilir:

$('#cmdSubmit')...

— Cletus
kaynak

Sanırım kapanış köşeli ayraç eksik. Ortak bir jQuery kaynağı beklendiği gibi çalışmıyor, tespit edilmesi zor: - /

— OregonGhost

İlk örneğiniz temelde çalışmayan örneğimin yaptığı şeydir. Kullanıcının giriş alanına metin ekleyip eklemediğini bilmek istiyorum, örneğiniz bunu yapmıyor.

— Cros

Aceleciydim, örneğiniz işe yarıyor gibi görünüyor, ancak yapmam gereken id'yi seçmiyor.

— Cros

"İnput [id = ..]" yapmak "#" ile aynı şey değildir. # size bir dizi nesne vermez.

— dev4life

@ dev4life aynı kimliğe sahip bir sayfada birden fazla öğe kullanıyorsanız, yanlış yapıyorsunuzdur

— Sean Kendle

12

En üst sıradaki gönderide belirtildiği gibi, aşağıdakiler Sizzle motoruyla çalışır.

$('input:text[value=""]');

Yorumlarda, :textseçici kısmının kaldırılmasının seçicinin başarısız olmasına neden olduğu belirtildi . Olanların, Sizzle'ın aslında mümkün olduğunda tarayıcının yerleşik seçici motoruna dayandığına inanıyorum. Seçiciye :texteklendiğinde, standart olmayan bir CSS seçici haline gelir ve bu nedenle, Sizzle tarafından ele alınması gerekir. Bu, Sizzle'ın kaynak HTML'de belirtilen "değer" özelliği yerine INPUT'un geçerli değerini kontrol ettiği anlamına gelir.

Bu nedenle, boş metin alanlarını kontrol etmenin akıllıca bir yolu, ancak bunun Sizzle motoruna özgü bir davranışa dayandığını düşünüyorum (kaynak kodda tanımlanan öznitelik yerine INPUT'un mevcut değerini kullanma). Sizzle bu seçiciyle eşleşen document.querySelectorAllöğeleri döndürebilir ancak yalnızca value=""HTML'de bulunan öğeleri döndürür . Uyarı imparatoru.

— üçüncü kişi
kaynak

5

`$("input[type=text][value=]")`

Bir çok sürümü denedikten sonra bunu en mantıklı buldum.

Bunun textbüyük / küçük harfe duyarlı olduğunu unutmayın .

4

@James Wiseman'ın cevabına dayanarak şunu kullanıyorum:

$.extend($.expr[':'],{
    blank: function(el){
        return $(el).val().match(/^\s*$/);
    }
});

Bu, 'gerçekten' boş olanlara ek olarak yalnızca boşluk içeren girdileri yakalayacaktır.

Örnek: http://jsfiddle.net/e9btdbyn/

— Huysuz
kaynak

3

Tavsiye ederim:

$('input:text:not([value])')

— TM.
kaynak

2

Bu işe yaramaz, çünkü [öznitelik] bir özniteliğin varlığını arar - bir değere sahip olup olmadığını değil. <input value="">yine eşleşecek.

— Ben Hull

Form alanları oluşturmak için Laravel'i kullanırken bana yardımcı oldu (örneğin {{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}) çünkü Laravel boşsa bir 'değer' özelliği eklemiyor. Bu yüzden kullandım: $('input:text:not([value]):visible:enabled:first');ilk görünür boş etkin metin giriş alanını bulmak için.

— Ryan

3

Burada benzer bir şeyi öneren birçok cevap var [value=""]ama bunun gerçekten işe yaradığını düşünmüyorum. . . veya en azından kullanım tutarlı değil. Benzer bir şey yapmaya çalışıyorum, aynı zamanda girilen değeri olmayan belirli bir dizeyle başlayan kimlikleri olan tüm girdileri seçiyorum. Bunu denedim:

$("input[id^='something'][value='']")

ama işe yaramıyor. Tersine çevirmek de olmaz. Bu kemanı görün . Bir dizeyle başlayan ve herhangi bir değer girilmemiş kimlikleri olan tüm girdileri doğru seçmenin tek yolu şuydu:

$("input[id^='something']").not("[value!='']")

ve

$("input[id^='something']:not([value!=''])")

ama açıkçası, çift negatifler bunu gerçekten kafa karıştırıcı hale getiriyor. Muhtemelen Russ Cam'ın ilk cevabı (filtreleme işlevli) en açık yöntemdir.

— Tandrewnichols
kaynak

1

Bu, "txt" ile başlayan bir kimliğe sahip boş metin girişlerini seçecektir:

$(':text[value=""][id^=txt]')

— Cros
kaynak

0

Her karşılaştırma için bir JQuery nesnesi oluşturmak verimli olmadığından, sadece şunu kullanın:

$.expr[":"].blank = function(element) {
    return element.value == "";
};

O zaman şunları yapabilirsiniz:

$(":input:blank")

— Lastikler
kaynak