メールボックスがいっぱいになった場合にのみ送信ボタンを機能させるには？

Question

私はサブスクリプションフォームのモーダルウィンドウを持っています。

入力フィールドが満たされているかどうかを確認するには、入力された場合はphpで情報を送信するか、それ以外の場合は<p class="alert-message"></p>にメッセージを表示しますか？

入力フィールドが空であってもサブミットをクリックした後でウィンドウを閉じます。

<div class="modal fade" id="subscription"> 
    <div class="modal-dialog modal-dialog-subscription"> 
    <div class="modal-content modal-content-subscription">  
     <div class="modal-body modal-body-subscription row"> 
     <div class="col-md-7"> 
      <img src="/image/subs1.jpg" width="100%"> 
     </div> 
     <div class="col-md-5"> 
      <h3 class="h3-subscription">Pls subsribe!</h3> 
      <p class="p-subscription">Sample text</p> 
      <p class="p-subscription">Sample text:</p> 
      <form> 
      <div class="form-group"> 
       <input type="email" class="form-control input-email" name="input-email" id="input-email" required="required"> 
       <p class="alert-message"></p> 
      </div> 
      <button class="btn btn-shopping-cart pull-right" id="subscribe_button"><span>Subsribe</span></button> 
      <button class="button btn btn-theme-default pull-left" data-dismiss="modal">Cancel</button> 
      </form> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

それだけで新しい訪問者（1日のクッキー）

<script type="text/javascript"> 
$(window).load(function(){ 
     if (! $.cookie('cookieExist')) { 
     $.cookie('cookieExist', true, { expires: 1 }); 
     setTimeout(function(){ 
      $('#subscription').modal('show'); 
      },5000); 
     } 
});  
</script> 

<script> 
    $(document).ready(function(){ 
    $("#subscribe_button").click(function() { 
      var email = $(".input-email").val(); 

      $.ajax({ 
       type: "POST", 
       url: "/subscribe.php", 
       //data: form_data, 
       data: {email: email}, 
       success: function() { 
        $('.modal-body-subscription').html("<div class='successfully-subscribed' style='margin-bottom: 15px;'>"); 
        $('.modal-body-subscription > .successfully-subscribed').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true' style='font-family: Geneva, Arial, Helvetica, sans-serif;'>&times;") 
        .append("</button>"); 
        $('.modal-body-subscription > .successfully-subscribed').append("<h1 class='text-center'>Thanks</h1>"); 
        $('.modal-body-subscription > .successfully-subscribed').append('</div>'); 
              }, 
       error: function() {  
        // Fail message 
        $('.modal-body-subscription').html("<div class='not-subscribed'>"); 
        $('.modal-body-subscription > .not-subscribed').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true' style='font-family: Geneva, Arial, Helvetica, sans-serif;'>&times;").append("</button>"); 
        $('.modal-body-subscription > .not-subscribed').append("<h1>Oops!</h1>"); 
        $('.modal-body-subscription > .not-subscribed').append('</div>'); 
       } 
      }); 
    }); 
});  


</script> 

Answer 1

これが唯一のHTML5で動作するために動作します。

<input type="email" class="form-control input-email" name="input-email" id="input-email" required="required"> 

お使いのブラウザはHTML5とcompactibleであれば、そう、あなたのフォームが送信されない場合、それはあなたのフォームで必須項目であると確認してください

Answer 2

試しだから、これはHTML5で追加されました

フォームが空で、そのAJAXを進めていない場合はそれ以外の場合は、フォームにエラーmessgesを投稿する最初の場合

if (!email) { 
    // then email value is empty, display error message 
    $(".alert-message").show(); // if is hidden 
    return false; 
} else { 
    // send data to server 
} 

Answer 3

チェックを次のよう。

これをアーカイブするには、入力が空の場合の検証を行う関数を作成します。私は、[JavaScriptを使用して、HTMLの入力テキストフィールドの検証]あなたのコード

$(document).ready(function() { 
       $("#subscribe_button").click(function() { 
        $(this).button('loading'); 
        var email = $(".input-email").val(); 

        /** 
        * Validate the form 
        */ 
        if (email === '' || !email) { 
         $('.alert-message').append('Email is required').show(); 
        } else { 

         $.ajax({ 
          type: "POST", 
          url: "/subscribe.php", 
          //data: form_data, 
          data: {email: email}, 
          success: function() { 
           $('.modal-body-subscription').html("<div class='successfully-subscribed' style='margin-bottom: 15px;'>"); 
           $('.modal-body-subscription > .successfully-subscribed').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true' style='font-family: Geneva, Arial, Helvetica, sans-serif;'>&times;") 
             .append("</button>"); 
           $('.modal-body-subscription > .successfully-subscribed').append("<h1 class='text-center'>Thanks</h1>"); 
           $('.modal-body-subscription > .successfully-subscribed').append('</div>'); 
          }, 
          error: function() { 
           // Fail message 
           $('.modal-body-subscription').html("<div class='not-subscribed'>"); 
           $('.modal-body-subscription > .not-subscribed').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true' style='font-family: Geneva, Arial, Helvetica, sans-serif;'>&times;").append("</button>"); 
           $('.modal-body-subscription > .not-subscribed').append("<h1>Oops!</h1>"); 
           $('.modal-body-subscription > .not-subscribed').append('</div>'); 
          } 
         }); 
        } 
       }); 
      });