Nasıl yapılır? Yalnızca e-posta alanı doldurulduğunda çalışmak için buttom gönderilsin mi?

Question

Abonelik formuna sahip kalıcı bir pencerem var.

Girdi alanı doldurulup doldurulmadığını, doldurulursa, php ile bilgi göndermekten başka nasıl işaretlenir, aksi halde <p class="alert-message"></p>?

Şimdi giriş alanı boş olsa bile, gönderim tıklandıktan sonra pencereyi kapatır.

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

Sadece yeni ziyaretçi (1 gün süreyle çerezler)

<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

Bu yalnızca html5 çalışacak için çalışır.

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

tarayıcı HTML5 ile kompaktlaşabilir ise, evet o zaman form gönderildiğinde olmayacak eğer sizin formda zorunlu bir alandır olarak kontrol edin

Answer 2

deneyin Yani bu HTML5'teki eklendi

Form boş ve onun ajax ile devam değilse aksi forma hata messges sonrası ilk eğer

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

kontrol aşağıdaki.

Bu arşivi arşivlemek için giriş boşsa, doğrulama yapmak için bir işlev oluşturun. Ben senin kodundan bu adapte ediyorum

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

[html kullanarak javascript giriş metin alanının doğrulama] (içinde