Periksa apakah input kosong menggunakan jQuery

Saya memiliki formulir yang saya ingin semua bidang diisi. Jika bidang diklik dan kemudian tidak diisi, saya ingin menampilkan latar belakang merah.

Ini kode saya:

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

Itu berlaku kelas peringatan terlepas dari bidang yang diisi atau tidak.

Apa yang saya lakukan salah?

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

Dan Anda tidak perlu .lengthatau melihat apakah itu >0karena string kosong bernilai false, tetapi jika Anda ingin untuk tujuan keterbacaan:

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

Jika Anda yakin itu akan selalu beroperasi pada elemen textfield maka Anda bisa menggunakannya this.value.

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

Anda juga harus mencatat bahwa $('input:text')mengambil beberapa elemen, menentukan konteks atau menggunakan thiskata kunci jika Anda hanya ingin referensi ke elemen tunggal (asalkan ada satu bidang teks pada keturunan / anak-anak konteks).

Setiap orang memiliki ide yang tepat, tetapi saya ingin sedikit lebih eksplisit dan memotong nilai-nilai.

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

jika Anda tidak menggunakan .length, maka entri '0' dapat ditandai sebagai buruk, dan entri 5 spasi bisa ditandai sebagai ok tanpa $ .trim. Semoga berhasil.

Melakukannya dengan blur terlalu terbatas. Diasumsikan ada fokus pada form isian, jadi saya lebih suka melakukannya pada submit, dan memetakan melalui input. Setelah bertahun-tahun berurusan dengan trik blur mewah, fokus, dll., Menjaga hal-hal yang lebih sederhana akan menghasilkan lebih banyak kegunaan di mana ia penting.

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

Anda bisa menggunakan juga ..

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

jika Anda ragu tentang spasi, maka coba ..

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

kenapa tidak ada yang disebutkan

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

tampaknya lebih seperti jquery bagiku

Peristiwa keyup akan mendeteksi jika pengguna telah membersihkan kotak juga (yaitu backspace meningkatkan acara tetapi backspace tidak meningkatkan acara penekanan tombol di IE)

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

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

Pertimbangkan untuk menggunakan plugin validasi jQuery sebagai gantinya. Mungkin sedikit berlebihan untuk bidang sederhana yang diperlukan, tetapi cukup matang sehingga menangani kasus tepi yang belum Anda pikirkan (juga tidak akan ada di antara kita sampai kita menabraknya).

Anda dapat menandai bidang yang diperlukan dengan kelas "wajib", jalankan $ ('form'). Validate () dalam $ (dokumen) .ready () dan hanya itu yang diperlukan.

Bahkan di-host di Microsoft CDN juga, untuk pengiriman cepat: http://www.asp.net/ajaxlibrary/CDN.ashx

The :emptypseudo-selector digunakan untuk melihat apakah sebuah elemen tidak mengandung Childs, Anda harus memeriksa nilai:

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

Ada satu hal lagi yang mungkin ingin Anda pikirkan, Saat ini hanya dapat menambahkan kelas peringatan jika kosong, bagaimana dengan menghapus kelas lagi ketika formulir tidak kosong lagi.

seperti ini:

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

Ini adalah contoh penggunaan keyup untuk input yang dipilih. Ini menggunakan trim juga untuk memastikan bahwa urutan karakter spasi hanya tidak memicu respons yang benar. Ini adalah contoh yang dapat digunakan untuk memulai kotak pencarian atau sesuatu yang terkait dengan jenis fungsionalitas itu.

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

Periksa apakah semua bidang kosong dan tambahkan ON atau OFF di Filter_button

Anda dapat mencoba sesuatu seperti ini:

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

Ini hanya akan berlaku .blur()untuk input dengan nilai kosong.

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

Dengan HTML 5 kita dapat menggunakan fitur baru "wajib", tambahkan saja ke tag yang Anda inginkan seperti:

<input type='text' required>

Kumpulan jawaban yang hebat, ingin menambahkan bahwa Anda juga dapat melakukan ini menggunakan :placeholder-shownpemilih CSS. Sedikit lebih bersih untuk menggunakan IMO, terutama jika Anda sudah menggunakan jQ dan memiliki pengganti pada input Anda.

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

Anda juga dapat menggunakan :validdan :invalidpenyeleksi jika Anda memiliki input yang diperlukan. Anda dapat menggunakan penyeleksi ini jika Anda menggunakan atribut yang diperlukan pada input.

Solusi khusus CSS bersih ini adalah:

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