Memilih input teks kosong menggunakan jQuery

103

Bagaimana cara mengidentifikasi kotak teks kosong menggunakan jQuery? Saya ingin melakukannya dengan menggunakan selektor jika memungkinkan. Juga, saya harus memilih id karena dalam kode sebenarnya di mana saya ingin menggunakan ini, saya tidak ingin memilih semua input teks.

Dalam dua contoh kode berikut, yang pertama secara akurat menampilkan nilai yang diketikkan ke dalam kotak teks "txt2" oleh pengguna. Contoh kedua mengidentifikasi bahwa ada kotak teks kosong, tetapi jika Anda mengisinya di dalamnya masih dianggap kosong. Kenapa ini?

Bisakah ini dilakukan hanya dengan menggunakan selektor?

Kode ini melaporkan nilai di kotak teks "txt2":

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

Kode ini selalu melaporkan kotak teks "txt2" sebagai kosong:

<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 Salib
sumber

6

Adakah yang tahu jika '[value =]' mengabaikan masukan pengguna dan hanya memeriksa apa yang ada di sumbernya?

Melintasi

Apakah saya benar bahwa: filter kosong dibuat untuk pekerjaan ini? $ ('input [type = text]: empty'). doStuff ();

Antony Carthy

1

baca dokumennya - docs.jquery.com/Selectors/empty . Kosong adalah untuk elemen yang tidak memiliki anak, BUKAN tidak ada nilai

Russ Cam

196

Cara lain

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

atau

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

atau

// 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=""]');

Bekerja Demo

kode dari demo

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
sumber

Bagi saya: if ($ ('[id ^ = txt]'). Filter (function () {return $ (this) .val () == "";}). Length> 0) {alert ('WARNING' ); }

Melintasi

Apa yang membedakan contoh terakhir Anda dari contoh kedua saya? Saya perlu memilih id, karena dalam kode sebenarnya saya tidak akan melihat semua input teks. Contoh kedua saya tidak berfungsi dengan input pengguna, tetapi milik Anda berfungsi.

Menyeberangi

1

Pemilih yang berfungsi tampaknya berkaitan dengan: teks di pemilih - jika Anda membuka demo yang berfungsi dan menambahkan / mengedit URL, Anda dapat bermain dengan pemilih yang digunakan. Jika Anda melepas teks:, pemilih tidak lagi berfungsi dengan benar, bahkan dengan $ ('input [value = ""]'). Mungkin ada bug di mesin pemilih Sizzle, tapi saya tidak punya waktu untuk menyelidikinya. Omong-omong, saya akan menyarankan menggunakan tag elemen di pemilih, jika tidak, setiap elemen akan diperiksa untuk melihat apakah ada kecocokan untuk nilai atribut.

Russ Cam

3

Jawaban bagus! Tetapi Anda mungkin juga ingin memastikan nilai elemen input benar-benar null (spasi kosong!). Pastikan Anda memangkas ruang kosong dalam kasus itu. Sesuatu seperti ini$('input:text').filter(function() { return $(this).val().trim() == ""; });

Vineeth Pradhan

31

Perhatikan bahwa jika elemen ada tetapi tidak memiliki atribut nilai, maka [value=""]pemilih tidak berfungsi karena tidak menemukan atribut nilai. Namun teknik .filter berfungsi dalam skenario ini.

AaronLS

26

Anda juga dapat melakukannya dengan menentukan pemilih Anda sendiri:

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

Dan kemudian akses mereka seperti ini:

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

James Wiseman
sumber

Saya sedikit khawatir tentang penampilannya. Tapi mungkin jawaban termudah!

aliqandil

19

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

?

Omong-omong, panggilan Anda untuk:

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

dapat sangat disederhanakan dan dipercepat dengan:

$('#cmdSubmit')...

cletus
sumber

Saya kira ada tanda kurung siku penutup yang hilang. Sumber umum jQuery tidak berfungsi seperti yang diharapkan, sulit dikenali: - /

OregonGhost

Contoh pertama Anda pada dasarnya adalah apa yang dilakukan oleh contoh saya yang tidak berfungsi. Saya ingin tahu apakah pengguna menambahkan teks ke kolom input, contoh Anda tidak melakukan ini.

Menyeberangi

Saya tergesa-gesa, contoh Anda sepertinya berhasil, tetapi tidak memilih id, yang harus saya lakukan.

Menyeberangi

Melakukan "input [id = ..]" tidak sama dengan "#". # tidak memberi Anda larik objek.

dev4life

@ dev4life jika Anda menggunakan beberapa elemen pada halaman dengan ID yang sama, Anda salah melakukannya

Sean Kendle

12

Seperti yang disebutkan di postingan peringkat teratas, berikut ini bekerja dengan mesin Sizzle.

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

Dalam komentar, tercatat bahwa menghapus :textbagian dari selector menyebabkan selector gagal. Saya yakin apa yang terjadi adalah Sizzle sebenarnya mengandalkan mesin pemilih bawaan browser jika memungkinkan. Saat :textditambahkan ke selektor, itu menjadi pemilih CSS non-standar dan karenanya harus ditangani oleh Sizzle itu sendiri. Ini berarti Sizzle memeriksa nilai INPUT saat ini, bukan atribut "nilai" yang ditentukan dalam HTML sumber.

Jadi ini adalah cara cerdas untuk memeriksa bidang teks kosong, tetapi saya pikir ini bergantung pada perilaku khusus untuk mesin Sizzle (yaitu menggunakan nilai INPUT saat ini daripada atribut yang ditentukan dalam kode sumber). Sementara Sizzle mungkin mengembalikan elemen yang cocok dengan pemilih ini, document.querySelectorAllhanya akan mengembalikan elemen yang ada value=""di HTML. Caveat emptor.

orang ketiga
sumber

5

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

Setelah mencoba banyak versi, saya menemukan ini yang paling logis.

Perhatikan bahwa textpeka huruf besar / kecil.

sumber

4

Berdasarkan jawaban @James Wiseman, saya menggunakan ini:

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

Ini akan menangkap input yang hanya berisi whitespace selain yang 'benar-benar' kosong.

Contoh: http://jsfiddle.net/e9btdbyn/

Gruffy
sumber

3

Saya akan merekomendasikan:

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

TM.
sumber

2

Ini tidak akan berhasil, karena [atribut] mencari keberadaan atribut - bukan apakah atribut tersebut memiliki nilai atau tidak. <input value="">akan tetap cocok.

Ben Hull

Ini berguna bagi saya saat menggunakan Laravel untuk menghasilkan bidang formulir (misalnya {{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}) karena Laravel tidak menambahkan atribut 'nilai' jika kosong. Jadi saya kemudian menggunakan: $('input:text:not([value]):visible:enabled:first');untuk menemukan bidang input teks aktif pertama yang terlihat kosong.

Ryan

3

Ada banyak jawaban di sini yang menyarankan sesuatu seperti itu, [value=""]tetapi menurut saya itu tidak benar-benar berfungsi. . . atau setidaknya, penggunaannya tidak konsisten. Saya mencoba melakukan sesuatu yang serupa, memilih semua input dengan id yang dimulai dengan string tertentu yang juga tidak memiliki nilai yang dimasukkan. Saya mencoba ini:

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

tapi tidak berhasil. Juga tidak membalikkan mereka. Lihat biola ini . Satu-satunya cara yang saya temukan untuk memilih dengan benar semua input dengan id yang dimulai dengan string dan tanpa nilai yang dimasukkan adalah

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

dan

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

tapi jelas, negatif ganda membuatnya sangat membingungkan. Mungkin, jawaban pertama Russ Cam (dengan fungsi pemfilteran) adalah metode yang paling jelas.

tandrewnichols
sumber

1

Ini akan memilih input teks kosong dengan id yang dimulai dengan "txt":

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

Salib
sumber

0

Karena membuat objek JQuery untuk setiap perbandingan tidak efisien, gunakan saja:

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

Kemudian Anda dapat melakukan:

$(":input:blank")

Ban
sumber

Memilih input teks kosong menggunakan jQuery

Jawaban:

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

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