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

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按预期工作：