フォームが空の場合、モーダルが起動しないようにする

Question

フィールドの情報を電子メールに配信するform.phpを指す、HTMLのフッターにフォームがあります。

Link to page（と一番下までスクロール）

私はまた、あなたが（ユーザーがインクルードがモーダルありがとう読み取ることができるようにする）5秒に提出遅延スクリプトを使用して、提出後に現れるモーダル感謝を持っています。

ユーザーがフィールドを空のままにして[送信]ボタンを押すと、モーダルがまだ表示されているので、それを避けたいという問題があります。

フィールドが空でも機能しなかった場合は、ボタンを無効にしようとしました。提出

<script type="text/javascript"> 
$('#footer-contact-form').submit(function (e) { 
    var form = this; 
    e.preventDefault(); 
    setTimeout(function() { 
     form.submit(); 
    }, 5000); // in milliseconds 
}); 

スクリプトを遅らせる

フォームコード

  <form method="post" action="form.php" class="form-horizontal" id="footer-contact-form"> 

       <fieldset> 

       <!-- Text input--> 
       <div class="form-group"> 
        <div class="col-md-12"> 
        <input id="name" name="name" type="text" placeholder="Full Name" class="form-control input-md" required> 

        </div> 
       </div> 

       <!-- Text input--> 
       <div class="form-group"> 
        <div class="col-md-12"> 
        <input id="email" name="email" type="text" placeholder="Email Address" class="form-control input-md" required> 

        </div> 
       </div> 

       <!-- Text input--> 
       <div class="form-group"> 
        <div class="col-md-12"> 
        <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md" required> 

        </div> 
       </div> 

       <!-- Textarea --> 
       <div class="form-group"> 
        <div class="col-md-12">      
        <textarea class="form-control" id="message" type="text" name="message" required placeholder="Message"></textarea> 
        </div> 
       </div> 

       <!-- Button --> 
       <div class="form-group"> 
        <div class="col-md-12"> 
        <button id="Send-footer" type="submit" name="Send" class="btn btn-default btn-footer" data-toggle="modal" data-target="#thanks">Send</button> 
        </div> 
       </div> 

       </fieldset> 
       </form> 

スクリプト私は、これは現在、私のために動作しません（送信ボタンを無効にしようとしました、ボタンは再び有効にならない）

<script> 
$(document).ready(function(){ 
    validate(); 
    $('#name, #email, #subject, #message').change(validate); 
}); 

function validate(){ 
    if ($('#name').val().length > 0 && 
     $('#email').val().length > 0 && 
     $('#subject').val().length > 0 && 
     $('#message').val().length > 0) { 
     $("#Send-footer").prop("disabled", false); 
    } 
    else { 
     $("#Send-footer]").prop("disabled", true); 
    } 
} 

すべてのヘルプは高く評価されるだろう。

Answer 1

多分これを試してみてください。私は "（）"が動作するので、私はdocument.ready上で呼び出された検証が呼び出される唯一の時間だと想像していないでvalidate関数を呼び出す場合、私はよく分かりません。

$(document).on('change', '#name, #email, #subject, #message', function() 
{ 
    validate(); 
}); 

Answer 2

実は、このスクリプトは、ボタン

<script> 
$('#Send-footer').attr('disabled', true); 
$('input:text').keyup(function() { 
    var disable = false; 
     $('input:text').each(function(){ 
      if($(this).val()==""){ 
       disable = true;     
      } 
     }); 
    $('#Send-footer').prop('disabled', disable); 
});