如何阻止按钮进入网站答案

【问题标题】：how to block the button from enter the website如何阻止按钮进入网站
【发布时间】：2014-10-02 23:06:01
【问题描述】：

我正在处理我的 html 源代码，让用户在文本框中输入他们的电子邮件地址，并允许他们点击提交按钮进入网站。

当用户没有在文本框中输入他们的电子邮件时，我想知道如何阻止他们进入网站以及如何显示“错误，您尚未输入您的电子邮件地址”的警告文本以强制他们先输入他们的电子邮件地址，然后他们才能点击提交按钮进入网站？

这里是html源代码：

<p class="leadstyle-text" style="display: block;">Enter your email address here:<br />
<input class="default-value" id="Email" name="Email" type="text" placeholder="Enter Your Email Address..." value="" />



<div id="form">
 <div id="ldheLabel5" style="position: absolute; left: 0px; top: 228px; width: 450px; height: 16px; text-align: center;">
 <a class="button1 leadstyle-link" href="www.mysite.com" id="submit-btn">&nbsp;&nbsp;&nbsp;&nbsp; Get Access Now! 
   <span class="arrow" style="color: rgb(85, 85, 85);">&nbsp; &nbsp;</span>
 </a>

编辑：当我尝试这个时，它什么也没做：

<form action="" onsubmit="validateEmail()">

<input required class="default-value" id="Email" name="Email" style="position: absolute;   left: 21px; top: 170px; width: 423px; height: 61px;" type="email" placeholder="Enter Your Email Address..." value=""/>

<input type="submit" value="Now access">


</form>


<script>
function validateEmail() {
  event.preventDefault();
  var email = document.getElementById('Email');
  if(email.value) {
    window.location="http://www.google.com/";
  }
}
</script>

【问题讨论】：

标签： javascript html input

【解决方案1】：

在输入字段上使用必需的属性。（警告这是一个 html5 属性，在旧版本的浏览器中不起作用）

<input required class="default-value" id="Email" name="Email" type="text" placeholder="Enter Your     Email Address..." value="" />


<form action="" onsubmit="validateEmail()">

<input required class="default-value" id="Email" name="Email" style="position: absolute;       left: 21px; top: 170px; width: 423px; height: 61px;" type="email" placeholder="Enter Your Email Address..." value=""/>

<input type="submit" value="Now access">


</form>


<script>
function validateEmail() {
  event.preventDefault();
  var email = document.getElementById('Email');
  if(email.value) {
    window.location="http://www.google.com/";
  }
}
</script>

【讨论】：

非常感谢您，当我不输入我的电子邮件地址时，我仍然可以点击按钮进入网站。我想在显示警告时强制在文本框中输入我的电子邮件地址。我该怎么做？
如何使用上面提到的按钮和window.location
非常感谢您，当我输入电子邮件地址并单击提交按钮时，它什么也没做。请在我的第一篇文章中查看我的更新帖子。
好的，请看我上面完整编辑的工作示例。希望能帮助到你。谢谢
我看不到您已使用更新帖子进行了编辑？我试过了，但它不起作用。

【解决方案2】：

在检查电子邮件值之前使用 preventDefault()。如此处所述http://api.jquery.com/event.preventdefault/

【讨论】：

【解决方案3】：

您可以在输入元素上使用 required 属性，这将阻止提交。但更好的是，如果您希望在此基础上进行电子邮件验证，则可以使用 input type=email。享受。

【讨论】：