如何阻止表单提交按钮

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

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

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

Answer 2

将required 属性添加到input 元素，如下所示：

<input required 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...">

这会阻止表单提交，直到用户填写 input，如果用户尝试在未填写该字段的情况下提交表单，则会显示工具提示。这是来自W3Schools 的required 属性的说明性示例以及来自MDN 的属性的一个很好的解释。

Answer 3

您可以尝试在 input[name=email] 标签的末尾添加required pattern="[^ @]+@[^ @]+.[a-z]+"，如下所示：

<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..." required pattern="[^ @]+@[^ @]+.[a-z]+" />

这不仅仅是检查输入的内容。
这还将检查电子邮件语法的有效性。