空無線電輸入，空文本輸入和最高價值的表格驗證

Question

我對JS不確定。 如果出現以下情況，我需要檢查不同的內容以防止提交表單：

輸入廣播“colorT”和“colorB”為空

輸入文本字段“length”和“height”為空

輸入字段“height”超過“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; width: auto; 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：