JQuery kullanarak girişlerin boş olup olmadığını kontrol edin

Tüm alanların doldurulmasını istediğim bir form var. Bir alan tıklatıldıktan sonra doldurulmadıysa, kırmızı bir arka plan görüntülemek istiyorum.

İşte benim kod:

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

Doldurulan alandan bağımsız olarak uyarı sınıfını uygular.

Neyi yanlış yapıyorum?

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

Ayrıca , boş bir dizenin zaten yanlış olarak değerlendirildiğinden, ancak okunabilirlik amacıyla yapmak isteyip istemediğinize .lengthveya gerekmez >0:

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

Her zaman bir metin alanı öğesinde çalışacağından eminseniz kullanabilirsiniz this.value.

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

Ayrıca $('input:text'), thisyalnızca tek bir öğeye başvuru yapmak istiyorsanız (içeriğin torunlarında / alt öğelerinde bir metin alanı olması koşuluyla) birden çok öğeyi yakaladığını, bir bağlam belirlediğini veya anahtar kelimeyi kullandığınızı unutmayın .

Herkesin doğru fikri var, ama biraz daha açık olmayı ve değerleri kesmeyi seviyorum.

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

.length kullanmazsanız, '0' girişi kötü olarak işaretlenebilir ve 5 boşluk girişi $ .trim olmadan tamam olarak işaretlenebilir. İyi şanslar.

Bulanıklaştırma üzerinde yapmak çok sınırlıdır. Form alanına odaklanıldığını varsayar, bu yüzden gönderimi yapmayı ve girdi üzerinden eşlemeyi tercih ederim. Yıllarca süslü bulanıklık, odak vb. Hilelerle uğraştıktan sonra, işleri daha basit tutmak önemli olduğu yerde daha fazla kullanılabilirlik sağlayacaktır.

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

ayrıca kullanabilirsiniz ..

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

boşluklar hakkında şüpheniz varsa, deneyin ..

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

neden kimse bahsetmedi

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

benim için daha jquery gibi görünüyor

Keyup olayı, kullanıcının kutuyu da temizleyip temizlemediğini algılar (yani geri silme olayı yükseltir, ancak geri silme tuşu IE'de tuş basma etkinliğini artırmaz)

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

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

Bunun yerine jQuery doğrulama eklentisini kullanmayı düşünün . Basit gerekli alanlar için biraz aşırı olabilir, ancak henüz düşünmediğiniz uç vakaları ele alacak kadar olgunlaşır (ya da bunlara rastlayana kadar herhangi birimiz olmaz).

Gerekli alanları bir "zorunlu" sınıfıyla etiketleyebilir, $ ('form'). $ (Document) .ready () içinde validate () çalıştırabilirsiniz ve hepsi bu kadar.

Hızlı teslimat için Microsoft CDN'de bile barındırılıyor: http://www.asp.net/ajaxlibrary/CDN.ashx

:emptySözde seçici değerini kontrol etmelidir Bir öğe çocuk herkesin içerip içermediğini görmek için kullanılır:

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

Düşünmek isteyebileceğiniz başka bir şey daha var: Şu anda uyarı sınıfını yalnızca boşsa ekleyebilir, form artık boş olmadığında sınıfı tekrar kaldırmaya ne dersiniz.

bunun gibi:

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

Burada seçilen giriş için tuş takımını kullanan bir örnek verilmiştir. Sadece beyaz boşluk karakterleri dizisinin doğru bir yanıtı tetiklemediğinden emin olmak için bir kırpma kullanır. Bu, bir arama kutusunu veya bu tür işlevsellikle ilgili bir şeyi başlatmak için kullanılabilecek bir örnektir.

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

Tüm alanların boş olup olmadığını kontrol edin ve Filter_button'a AÇIK veya KAPALI ekleyin

Böyle bir şey deneyebilirsiniz:

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

.blur()Olayı yalnızca boş değerlere sahip girişlere uygular .

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

HTML 5 ile yeni bir "gerekli" özelliğini kullanabiliriz, sadece aşağıdaki gibi olmasını istediğiniz etikete ekleyin:

<input type='text' required>

Cevapların büyük bir koleksiyonu, bunu kullanarak :placeholder-shown CSS seçiciyi . IMO'yu kullanmak için biraz daha temiz, özellikle jQ kullanıyorsanız ve girişlerinizde yer tutucular varsa.

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

Gerekli girişleriniz varsa :validve :invalidseçicileri de kullanabilirsiniz . Bir girişte gerekli özelliği kullanıyorsanız bu seçicileri kullanabilirsiniz.

Temiz bir CSS çözümü şu olabilir:

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