Question

更新了问题：

我添加了＃34;必需＆＃34;到所有字段，除了表单仍将提交，如果

第一个@秒用作电子邮件。即使错过.com（或其他），它也会提交。

我如何合并此验证呢？

谢谢！

原始问题：

我的网站只有一个电子邮件字段的注册表单。目前有验证器可以验证输入的电子邮件的正确语法，但如果该字段留空，则表单将提交。我需要在提交前确认该字段不是空白。如果它是空白的，则应该显示一些消息 - 类似于出现的消息，例如，不包括@符号。

我的演示页面为here.

表单html：

<div class='form animated flipInX'> <h2>Sign Up</h2> <form action="http://mydomain.us10.list-manage.com/subscribe/post" method="POST"> <input type="hidden" name="u" value="a324dfsf32erwdafdaf3dfsdsdf"> <input type="hidden" name="id" value="32df32rff2"> <input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield"> <button class='animated infinite pulse'>Let's Go!</button> </form> </div>

有什么建议吗？谢谢

Answer 1

在输入标记中使用required

必需属性是布尔属性。

如果存在，则指定在提交表单之前必须填写输入字段。

所以你的输入应该是

<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield" required>

在这里查看more information

更新：

type="email"是html5的常见属性。如果您需要验证，则应使用输入元素中的模式

你应该使用pattern="[a-z0-9!#$%&'*+/=?^_ {|}〜 - ] +（？：。[a-z0-9！＃$％＆amp;'* + / =？^ _ {|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b

以下是应该使用的一个

<input type="email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b">

根据您更新的问题，这是jsfiddle

Answer 2

您可以在输入标记中添加required属性。

Answer 3

<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield" required="true">

幸运的是，这很容易

Answer 4

执行此操作以在输入标记中添加required属性的最佳方法

Answer 5

请检查此解决方案，其中我使用jquery检查它是空白还是已填写

<div class='form animated flipInX'>
<h2>Sign Up</h2>
<form action="http://mydomain.us10.list-manage.com/subscribe/post"  method="POST">
<input type="hidden" name="u" value="a324dfsf32erwdafdaf3dfsdsdf">
<input type="hidden" name="id" value="32df32rff2">
<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield">
<button class='animated infinite pulse' type="submit" onClick="checkval();">Let's Go!</button>
 </form>
</div>
 <script>
  function checkval()
  {
     var email_val=$("#MERGE0").val();
     if(email_val.length>2) 
     {
     }
     else
     {
        alert("email is required.");/*there you change show the value which you want to show as a error message.*/
         event.preventDefault();
         /* this help to stop submit form*/ 
     }

   }
   </script>

希望这可以帮到你

Answer 6

我不知道你的问题是否已被回答，但试试这个：

//The Input
<input type='email' id='email' placeholder='email' onchange='emailCheck()'>
//The Button
<button id='button' style='visibility:hidden'>Submit</button>
//Javascript
<script>
var input = document.getElementById('email').value;
if(input.indexOf("@") > -1){

if(input.indexOf(".com") >= input.length - 4){
document.getElementById('button').style.visibility = 'visible';
}else{
alert('Custom Invalid Email Alert');
}

}else{
alert('Custom Invalid Email Alert');
}
</script>

Answer 7

必需是最佳选择，或者您可以使用java脚本

像这样

    <script type="text/javascript">
          function validateForm()
        {
          var a=document.forms["Form"]["answer_a"].value;
        var b=document.forms["Form"]["answer_b"].value;
       var c=document.forms["Form"]["answer_c"].value;
        var d=document.forms["Form"]["answer_d"].value;
                   if (a==null || a=="",b==null || b=="",c==null || c=="",d==null             || d=="")
         {
           alert("Please Fill All Required Field");
          return false;
           }
        }
        </script>

          <form method="post" name="Form" onsubmit="return         validateForm()" action="">
           <textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
             <textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
           <textarea cols="30" rows="2" name="answer_c" id="c"></textarea>
           <textarea cols="30" rows="2" name="answer_d" id="d"></textarea>
      </form>

如何在提交表单之前验证电子邮件字段是否为空白

7 个答案: