好吧,在阅读了大约30个例子并测试了它们之后,我终于决定发布我的问题,因为所有的例子都不适合我。
所以我不是javascript专家,但验证一个简单的单选按钮应该不会太难,至少我是这么想的。
当表单不正确时,我试图输出一个漂亮的css错误处理。不过,出于某种原因,我的单选按钮错误弹出不到一秒钟,然后又消失了。不过,其他错误(非无线电)确实有效。对于这个问题,我只发布单选按钮部分的代码。
HTML:
<div align="left"><form name="myForm" method="post" style="display:inline" onsubmit="return(validate());">
<div class="radio">
<input type="radio" class="radio" name="automatisering" value="1">Automatisering
<input type="radio" class="radio" name="automatisering" value="2">Software
<div id="Fout" style="display:none" color="white"></div>
</div>
input type="submit" value="Submit" />
</form></div>
验证块:
function validate()
{
if(document.myForm.automatisering[0].checked != true && document.myForm.automatisering[1].checked != true)
{
document.getElementById("Fout").style.display = 'inherit';
document.getElementById("Fout").setAttribute("title", "Some error message");
document.myForm.automatisering.focus() ;
return false;
}
else
{
document.getElementById("Fout").style.display = 'none';
}
~~~~~Other validation with text, email, phone, etc. that DOES work. All starting with the if and returning false with div displaying like the radio example.
return( true );
}
我尝试过的事情(但没有成功-输出错误不到一秒钟,而它不应该消失):
1#基于我发现的一些幻想
var elem=document.forms['myForm'].elements['automatisering'];
len=elem.length-1;
chkvalue='';
for(i=0; i<=len; i++)
{
if(elem[i].checked)chkvalue=elem[i].value;
}
if(chkvalue=='')
{
document.getElementById("Fout").style.display = 'inherit';
document.getElementById("Fout").setAttribute("title", "Some error message!");
document.myForm.automatisering.focus() ;
return false;
}
document.getElementById("Fout").style.display = 'none';
2#基于无线电的值(手动给定)
if(document.myForm.automatisering.value != 1 && document.myForm.automatisering.value != 2)
{
document.getElementById("Fout").style.display = 'inherit';
document.getElementById("Fout").setAttribute("title", "Some error message!");
document.myForm.automatisering.focus() ;
return false;
}
else
{
document.getElementById("Fout").style.display = 'none';
}
3#基于无线电阵列
if(document.myForm.automatisering[0].checked != true && document.myForm.automatisering[1].checked != true)
{
document.getElementById("Fout").style.display = 'inherit';
document.getElementById("Fout").setAttribute("title", "Some error message!");
document.myForm.automatisering.focus() ;
return false;
}
else
{
document.getElementById("Fout").style.display = 'none';
}
我尝试过的所有事情的结果都是一样的,我在0.5秒内收到错误消息(div),它立即消失。还尝试删除else上的display='none',但这导致了相同的问题。
此代码无效:
document.myForm.automatisering.focus() ;
document.myForm.automaterising
是NodeList
,您只能关注特定的DOM元素。当它从该语句中得到错误时,它从不执行return false
,因此表单被提交。
尝试将其更改为:
document.myForm.automatisering[0].focus() ;
它确实对我有效。我修复了HTML中的语法错误(input
错过了它的开头标记)http://codepen.io/anon/pen/PwRXbr
编辑:
问题是,当您返回false时,onsubmit方法显然不会阻止<form>
的提交。您可以创建一个按钮来检查值,然后调用document.myForm.submit()
。以下是一个示例:http://codepen.io/anon/pen/ZYxVJy
以下是工作代码:HTML
<div align="left">
<form name="myForm" action="#" style="display:inline" onsubmit="return(validate());">
<div class="radio">
<input type="radio" class="radio" name="automatisering" value="1">Automatisering
<input type="radio" class="radio" name="automatisering" value="2">Software
<div id="Fout" style="display:none" color="white">bla</div>
</div>
<input type="submit" value="Submit" />
</form>
</div>
JavaScript
function validate()
{
if(document.myForm.automatisering[0].checked != true && document.myForm.automatisering[1].checked != true)
{
document.getElementById("Fout").style.display = 'block';
document.getElementById("Fout").setAttribute("title", "Some error message");
document.myForm.automatisering.focus() ;
return false;
}
else
{
document.getElementById("Fout").style.display = 'none';
}
return true;
}