Eğer girişler boşsa jQuery

Question

Gönderme/Gönderme düğmesini devre dışı bırakıyorum Her yere baktım ama benim için çalışan hiçbir şey bulamadım. Kullanıcıların eksik form göndermelerini engellemeye çalışıyorum. Varsayılan olarak "gönder" özelliğini devre dışı bıraktım ve amaç, tüm girdiler sağlanmışsa "devre dışı bırak" özelliğini kaldırmaktır. Herhangi bir nedenle, gönder düğmesi hala devre dışıdır. Aşağıdaki kodun çalışması gerektiğine inanıyorum, ama sanırım bir şey kaçırıyor olabilirim.

FYI - Kullanıcıların tarihleri ​​ve saatleri seçmesine izin vermek için Jquery datepicker ve timepicker kullanıyorum.

Yeni başlayanlara yardım edebilecektir mi?

<script> 
 
\t $(document).ready(function() { 
 
\t  $('.field input').keyup(function() { 
 
\t 
 
\t   var empty = false; 
 
\t   $('.field input').each(function() { 
 
\t    if ($(this).val().length == 0) { 
 
\t     empty = true; 
 
\t    } 
 
\t   }); 
 
\t 
 
\t   if (empty) { 
 
\t    $('.actions input').attr('disabled', 'disabled'); 
 
\t   } else { 
 
\t    $('.actions input').removeAttr('disabled'); 
 
\t   } 
 
\t  }); 
 
\t }); 
 
\t 
 
</script> 
 

 

 
    <div> 
 

 
\t <form class="form" name="frm1" method="POST"> 
 
\t 
 
\t  <div class='field'> 
 
\t  <label for="datepicker">Day:</label> 
 
\t  <input type="text" name="txtDate" id="datepicker"> </br> 
 
\t  </div> 
 
\t  
 
\t  <div class='field'> 
 
\t  <label for="fromtime">From:</label> 
 
\t  <input type="text" name="txtStartTime" id="fromtime"></br> 
 
\t  </div> 
 
\t  
 
\t  <div class='field'> 
 
\t  <label for="totime">To:</label> 
 
\t  <input type="text" name="txtEndTime" id="totime"></br> 
 
\t  </div> 
 
\t  
 
\t  <div class='droppies'> 
 
\t  \t  <label for="level">Level</label> 
 
\t \t  <select name="level" id="level"> 
 
\t \t \t \t <option selected value='%'></option> 
 
\t \t \t \t <option value='Beginner'>Beginner</option> 
 
\t \t \t \t <option value='Intermediate'>Intermediate</option> 
 
\t \t \t \t <option value='Advanced'>Advanced</option> 
 
\t \t \t \t <option value='%'>Any levels</option> 
 
\t \t \t \t 
 
\t \t  </select> 
 
\t  </div> 
 
\t  
 
\t  <div class='actions'> 
 
\t  \t <input type="submit" name="submit" value="search" disabled="disabled"> 
 
\t  </div> 
 
    \t </form> 
 
\t 
 

 
    </div>

Answer 1

Sen html girişine gerekli ekleyebilirler.

<input type="text" name="txtDate" id="datepicker" required> 

Answer 2

IE kullanıyorsunuz? attr özürlü orada çalışmaz Çünkü, kullanmak gerekir:

$('.actions input').prop('disabled', true); 

Ve

$('.actions input').prop('disabled', false); 

Answer 3

içine çalıştıran sorun uyguladıklarını dinleyici türüyle olduğunu. SADECE girişlerinizde bir anahtarlama açıldığında, devre dışı bırakılmış düğmenizin durumunu değiştirmeye çalışıyorsunuz. Tarihinizi jquery timepicker eklentinizin amacı olan tıklamaları kullanarak değiştiriyorsanız, doğrulama durumuyla ilgili bir kontrol tetiklemezsiniz.

Giriş öğelerinizdeki değişiklikleri izlemek için kullanmalısınız.

$('.field input').change(function(){ ... logic ...}); 

Answer 4

Kullanım .filter seçme tarihte doğrulamaları test etmek DatePicker seçeneklerinde ''

olarak kullanın onSelect değeri olan elementlerin sayısını alır.

Not:.prop over .attr'u kullanın. $(SELECTOR).on('input') kullanılabilir. Bir <input> or <textarea> elemanın değeri

bu deneyin değiştiğinde DOM input olay eşzamanlı tetiklenir:

function test() { 
 
    var len = $('.field :input').filter(function() { 
 
    return !$(this).val(); 
 
    }).length; 
 
    $('.actions input').prop('disabled', !!len); 
 
} 
 

 
$(document).ready(function() { 
 
    $('#datepicker').datepicker({ 
 
    dateFormat: 'dd-mm-yy', 
 
    onSelect: test 
 
    }); 
 
    $('.field input').keyup(test); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> 
 
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<div> 
 
    <form class="form" name="frm1" method="POST"> 
 
    <div class='field'> 
 
     <label for="datepicker">Day:</label> 
 
     <input type="text" name="txtDate" id="datepicker"> 
 
    </div> 
 
    <div class='field'> 
 
     <label for="fromtime">From:</label> 
 
     <input type="text" name="txtStartTime" id="fromtime"> 
 
    </div> 
 
    <div class='field'> 
 
     <label for="totime">To:</label> 
 
     <input type="text" name="txtEndTime" id="totime"> 
 
    </div> 
 
    <div class='droppies'> 
 
     <label for="level">Level</label> 
 
     <select name="level" id="level"> 
 
     <option selected value='%'></option> 
 
     <option value='Beginner'>Beginner</option> 
 
     <option value='Intermediate'>Intermediate</option> 
 
     <option value='Advanced'>Advanced</option> 
 
     <option value='%'>Any levels</option> 
 
     </select> 
 
    </div> 
 
    <div class='actions'> 
 
     <input type="submit" name="submit" value="search" disabled="disabled"> 
 
    </div> 
 
    </form> 
 
</div>

Fiddle here