Wie funktioniert der Submit-Button nur, wenn das E-Mail-Feld ausgefüllt ist?

Question

Ich habe modales Fenster mit Anmeldeformular.

Wie überprüft man, ob das Eingabefeld gefüllt war oder nicht, wenn es gefüllt ist, dann senden Sie info mit php, andernfalls zeigen Sie die Nachricht in <p class="alert-message"></p>?

Nun wird das Fenster nach dem Klicken auf "Senden" geschlossen, auch wenn das Eingabefeld leer ist.

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

Es funktioniert nur für neue Besucher (Cookies für 1 Tag)

<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

Dies wird nur in html5 arbeiten.

So wurde dieser in HTML5 hinzugefügt

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

Bitte überprüfen Sie, ob Ihr Browser compactible mit HTML5 ist, wenn ja, dann wird das Formular nicht eingereicht werden, wie es ist Pflichtfeld in Ihrem Formular

Answer 2

die Try

folgende

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

prüfen Sie zuerst, ob das Formular leer ist und wenn sie nicht mit dem ajax geht sonst Fehler messges zum Formular veröffentlichen.

Um dies zu archivieren, erstellen Sie eine Funktion für die Validierung, wenn die Eingabe leer ist. Ich bin dieses

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