入力が空のjqueryの場合はサブミット/ポストボタンを無効にする

Question

私はすべてを見てきましたが、私のために働いたものは何も見つかりませんでした。ユーザーが不完全なフォームを送信しないようにしようとしています。私はデフォルトで "submit"を無効にしており、すべての入力が提供されている場合は、 "disable"属性を削除することを意図しています。何らかの理由で、送信ボタンがまだ無効です。私は以下のコードがうまくいくはずだと信じていますが、私は何か不足しているかもしれないと思います。

FYI - Jquery datepickerとtimepickerを使用して、ユーザーが日付と時刻を選択できるようにしています。

誰でも初心者を助けることができますか？

<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

あなたは、HTMLの入力に必要な追加することができます。

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

Answer 2

IEを使用しているとしますか？ ATTR無効が動作しませんので、あなたが使用する必要があります。

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

そして

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

Answer 3

あなたに実行している問題は、あなたが実装しているリスナーのタイプです。キーアップが入力されたときに無効化されたボタンの状態を変更しようとしているだけです。 jqueryのtimepickerプラグインの意図であるクリックを使用して日付を変更している場合、検証ステータスのチェックは行われません。

入力要素の変更を監視する必要があります。

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

Answer 4

使用.filter選択日付に検証をテストするために、日付ピッカーオプションで使用onSelect''

としての価値を有する要素の数を取得します。

注：.prop over .attrを使用してください。 $(SELECTOR).on('input')を使用することができる。 <input> or <textarea>要素の値が

はこれを試してみてください変更されたときDOM inputイベントが同期発射される：

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