表单验证为空无线电输入，空文本输入和最高值

Question

我对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()" > 

Answer 1

你应该使用插件，例如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工作的最大值：