javascript - 如何屏蔽表单提交按钮

Question

我正在处理我的 html 源代码，让用户在文本框中输入他们的电子邮件，然后单击提交按钮进入网站。

当用户没有在文本框中输入他们的电子邮件时，他可以点击提交按钮进入该站点。我想阻止它以阻止他们进入该站点。

这是我使用的代码:

<div id="MainContent">
  <div id="content"></div>
  <div id="form">
  <div id="WFItem5736404" class="wf-formTpl">
    <form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html?u=KLlP" method="post">
            <div id="WFIcenter" class="wf-body">
                        <div class="wf-contbox">
                            <div class="wf-inputpos">
                                <input name="email" class="Email" style="position: absolute; left: 4%; bottom: 110px; width: 90%; height: 51px;" type="text" data-placeholder="yes" placeholder="Enter your Email Address...">
                            </div>
                        </div>
                        <div class="wf-contbox">
                            <div class="wf-inputpos">
                                <input name="submit" class="button" style="position: absolute; left: 4%; bottom: 46px; width: 92.5%; height: 56px;" type="image" src="button.png">
                        </div>
            </div>
        </div>

        <input type="hidden" name="webform_id" value="5736404" />
    </form>
</div>
<script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=5736404&mg_param1=1&u=KLlP"></script>
</div>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "email");
</script>

我想在电子邮件文本框下添加工具提示，以强制用户在点击提交进入网站之前输入他们的电子邮件地址。

你能告诉我如何在文本框为空时阻止提交按钮进入网站，以便我可以在文本框下添加工具提示以强制用户输入他们的电子邮件吗？

Answer 1

您可以监听 submit 事件并使用 event.preventDefault() 阻止其默认(提交)行为

Demo fiddle

Javascript(纯)

var form = document.getElementById('yourFormId');
form.onsubmit = function (ev) {
   if (!inputDataIsValid()) {
      ev.preventDefault();
      alert('invalid input data');
   }
};

注意:如果您使用 jQuery，您可以通过以下方式执行相同的操作:

$('.form-selector').on('submit', function (ev) {
   if (!inputDataIsValid()) {
      ev.preventDefault();
      alert('invalid input data');
   }
});