表單驗證爲空無線電輸入，空文本輸入和最高值

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工作的最大值：