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

您可以尝试在输入[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]+" />

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

如何阻止表单提交按钮

3 个答案:

Javascript（纯）