表单验证为空无线电输入,空文本输入和最高值
我对JS没有信心。我需要检查不同的东西,以防止表单提交,如果:表单验证为空无线电输入,空文本输入和最高值
输入电台“colorT”和“colorB”是空的
输入文本字段“长度”和“高度”是空的
输入字段“高度”超过“400”。
这怎么可能?
<form name="tapform" method="post" action="">
<p><input type="radio" name="colorT" value="181" id="181" /></p>
<p><input type="radio" name="colorT" value="151" id="151" /></p>
<p><input type="radio" name="colorT" value="110" id="110" /></p>
<br />
<p><input type="radio" name="colorB" value="8309" id="8309" /></p>
<p><input type="radio" name="colorB" value="8305" id="8305" /></p>
<p><input type="radio" name="colorB" value="8313" id="8313" /></p>
<p>LENGTH:</p>
<input type="text" name="length" />
<p>HEIGHT (max 400):</p>
<input type="text" name="height" />
<br />
<input type="submit" name="submit" id="submit" value="Check" />
</form>
编辑:Thx。我试图更清晰:用户必须不能够发送的形式,如果缺少了什么,或者如果高度场400多个。像这样的东西(或更简单的方法,如果可能的话):
<script type="text/javascript">
function checkTap(){
if (document.tapform.colorT.checked==""){
alert("Alert! ColorT is empty");
return false;
}
else if (document.tapform.colorB.checked==""){
alert("Alert! ColorB is empty");
return false;
}
else if (document.tapform.length.value==""){
alert("Alert! Length is empty");
return false;
}
else if (document.tapform.height.value==""){
alert("Alert! Height is empty");
return false;
}
else if (document.tapform.height.value>"400"){
alert("Alert! Height is more than 400");
return false;
}
else {
return true;
}
}
</script>
<form name="tapform" method="post" action="" onsubmit = "return checkTap()" >
你应该使用插件,例如jqueryvalidation。使用插件,所需的更改是微不足道的。请注意,如果表单未经验证,插件将自动停止提交。
$("#myform").validate();
#myform label.error {
margin-left: 10px;
\t width: auto;
\t display: inline;
color:red;
padding:4px;
border: 1px red solid;
box-shadow: 0 0 3px rgba(255,0,0,0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<form id="myform" name="tapform" method="post" action="">
<p><input type="radio" name="colorT" value="181" id="181" required/></p>
<p><input type="radio" name="colorT" value="151" id="151" /></p>
<p><input type="radio" name="colorT" value="110" id="110" /></p>
<br />
<p><input type="radio" name="colorB" value="8309" id="8309" required/></p>
<p><input type="radio" name="colorB" value="8305" id="8305" /></p>
<p><input type="radio" name="colorB" value="8313" id="8313" /></p>
<p>LENGTH:</p>
<input type="text" name="length" required/>
<p>HEIGHT (max 400):</p>
<input type="text" name="height" required min="1" max="400"/>
<br />
<input type="submit" name="submit" id="submit" value="Check" />
</form>
只是不要忘了包括
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
和
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
截图显示如预期400工作的最大值:
谢谢,它工作正常,但最大值不起作用:如果“高度”超过400,也会提交表单。我阅读文档并测试了不同的方式,但到目前为止我还没有找到解决方案。 如果我做不到,我只会在服务器端检查它。 – Alt 2015-02-12 13:25:36
您确定您已将输入内容更改为“'?在我的例子中它适用于我。例如,如果我输入666,我会收到消息“请输入一个小于或等于400的值”,并且表单未提交,请参阅上面添加的屏幕截图。 – DelightedD0D 2015-02-12 13:46:29
是的,我做到了,但它不起作用。但是,如果我直接在jQ中设置“required”和“max:40”,它会正常工作: $(“#myform”).validate({rules:{colorT:“required”,colorB:“required” “required”,height:{required:true,max:400}}}); – Alt 2015-02-12 14:31:31
是有可能 – OJay 2015-02-12 08:44:00
是的,它是可能的,但我得到的是,这里实际上并不是问题的感觉。考虑编辑你的问题,提供一个明确的问题陈述,并清楚地列出预期的行为。如果你包含了迄今为止已经尝试过的示例,那么它也会有所帮助,我只看到一些HTML,没有Javascript。 – Aiken 2015-02-12 08:44:07