更新问题:
我在所有字段中添加了"必填",但如果,表单仍将提交
first@second用作电子邮件。即使错过了.com(或其他什么),它也会提交。
我该如何将此验证也纳入其中?
谢谢!
原始问题:
我的网站有一个注册表格,只有一个电子邮件字段。目前,有一些验证器可以验证输入的电子邮件的正确语法,但如果字段为空,则表单将提交。在提交之前,我需要验证该字段是否为空。如果它是空的,应该会出现一些消息——类似于出现的消息,例如没有包含@符号。
我的演示页面在这里。
表单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>
有什么建议吗?感谢
在输入标签中使用required
必需的属性是布尔属性。
当存在时,它指定在提交表单之前必须填写一个输入字段
所以你的输入应该是
<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield" required>
点击此处查看更多信息
更新:
type="email"
是html5的公共属性。如果你需要验证,你应该在你的输入元素中使用图案
您应该使用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
这是一个使用应该使用
<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">
这是根据您更新的问题
您可以在输入标记中添加required
属性。
<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield" required="true">
幸运的是,这是一个简单的
在输入标记中添加required
属性的最佳方法
请检查此解决方案,在该解决方案中,我使用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>
希望这可以帮助你
我不知道你的问题是否得到了答案,但试试这个:
//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>
必需是最佳选项,或者您可以使用java脚本
像这个
<script type="text/javascript">
function validateForm()
{
var a=document.forms["Form"]["answerswer_a"].value;
var b=document.forms["Form"]["answerswer_b"].value;
var c=document.forms["Form"]["answerswer_c"].value;
var d=document.forms["Form"]["answerswer_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="answerswer_a" id="a"></textarea>
<textarea cols="30" rows="2" name="answerswer_b" id="b"></textarea>
<textarea cols="30" rows="2" name="answerswer_c" id="c"></textarea>
<textarea cols="30" rows="2" name="answerswer_d" id="d"></textarea>
</form>