如何使提交按钮仅在填写电子邮件字段时才起作用？

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>

它仅适用于新访问者（cookies 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。

所以这是在 HTML5 中添加的

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

请检查您的浏览器是否与 HTML5 兼容，如果是，则您的表单将不会被提交，因为它是您表单中的必填字段

Answer 2

试试下面的

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

首先检查表单是否为空，如果它不继续使用 ajax，否则将错误消息发布到表单。

要归档它，请创建一个函数来验证输入是否为空。我正在根据您的代码进行调整

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