Javascript 如何使“提交”按钮仅在电子邮件字段已填写的情况下工作？

我有一个带有订阅表单的模式窗口

如何检查输入字段是否已填充，如果已填充，则使用php发送信息，否则在

中显示消息

现在，即使输入字段为空，它也会在单击提交后关闭窗口

<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天的cookies）


$（窗口）。加载（函数（）{
if（！$.cookie（'cookieExist'））{
$.cookie（'cookieExist'，true，{expires:1}）；
setTimeout（函数（）{
$（“#订阅”）.modal（'show'）；
},5000);
}
});    
$（文档）.ready（函数（）{
$（“#订阅按钮”）。单击（函数（）{
var email=$（“.input email”）.val（）；
$.ajax({
类型：“POST”，
url:“/subscribe.php”，
//数据：表格数据，
数据：{email:email}，
成功：函数（）{
$（'.modal body subscription'）.html（“”）；
$（'.modal body subscription>.successfully subscription'）.html（“×；”）
.附加（“”）；
$（'.modal body subscription>.successfully subscription'）。追加（“谢谢”）；
$（'.modal body subscription>.successfully subscription'）。追加（''；
},
错误：函数（）{
//失败消息
$（'.modal body subscription'）.html（“”）；
$（'.modal body subscription>.not subscripted'）.html（“×；”）.append（“”）；
$（'.modal body subscription>.not subscripted'）.append（“Oops！”）；
$（'.modal body subscription>.not subscripted'）。追加（''）；
}   
});
});
});    
这只适用于html5

所以这是在HTML5中添加的

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



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

所以这是在HTML5中添加的

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



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

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

试试下面的方法

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

首先检查表单是否为空，如果为空，则继续使用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>');
                            }
                        });
                    }
                });
            });

$（文档）.ready（函数（）{
$（“#订阅按钮”）。单击（函数（）{
$（this.button（'load'）；
var email=$（“.input email”）.val（）；
/**
*验证表单
*/
如果（电子邮件==''| |！电子邮件）{
$（'.alert message'）.append（'需要电子邮件'）.show（）；
}否则{
$.ajax({
类型：“POST”，
url:“/subscribe.php”，
//数据：表格数据，
数据：{email:email}，
成功：函数（）{
$（'.modal body subscription'）.html（“”）；
$（'.modal body subscription>.successfully subscription'）.html（“×；”）
.附加（“”）；
$（'.modal body subscription>.successfully subscription'）。追加（“谢谢”）；
$（'.modal body subscription>.successfully subscription'）。追加（''；
},
错误：函数（）{
//失败消息
$（'.modal body subscription'）.html（“”）；
$（'.modal body subscription>.not subscripted'）.html（“×；”）.append（“”）；
$（'.modal body subscription>.not subscripted'）.append（“Oops！”）；
$（'.modal body subscription>.not subscripted'）。追加（''）；
}
});
}
});
});
首先检查表单是否为空，如果不是空的，则继续使用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>');
                            }
                        });
                    }
                });
            });

$（文档）.ready（函数（）{
$（“#订阅按钮”）。单击（函数（）{
$（this.button（'load'）；
var email=$（“.input email”）.val（）；
/**
*验证表单
*/
如果（电子邮件==''| |！电子邮件）{
$（'.alert message'）.append（'需要电子邮件'）.show（）；
}否则{
$.ajax({
类型：“POST”，
url:“/subscribe.php”，
//数据：表格数据，
数据：{email:email}，
成功：函数（）{
$（'.modal body subscription'）.html（“”）；
$（'.modal body subscription>.successfully subscription'）.html（“×；”）
.附加（“”）；