[英]How to validate a form if user must check at least one checkbox?
我正在尝试验证表单是否至少选中了一个复选框。 但 JavaScript 函数并未对其进行验证。
function checkMe() {
document.getElementById("frm").onsubmit = function() {
if ((document.getElementById("c1").checked == false) && (document.getElementById("c2").checked == false) && (document.getElementById("c3").checked == false) && (document.getElementById("c4").checked == false)) {
alert("pleast tick atleast one");
return false;
} else {
return true;
}
};
}
window.onload = function() {
checkMe();
}
HTML 代码在这里:在选中至少一个复选框之前不应提交
<form action="xyz.php" id="frm" name="frm">
<select name="loc">
<option value="1">1</option>
<option value="2">2</option>
<option value="11">11</option>
<option value="22">22</option>
</select>
<br><br><p>Services</p><br>
<dd>
<div class="multiSelect">
<ul>
<li>
<input id="c1" type="checkbox" value="a" name="ch1">a
</li>
<li>
<input id="c2" type="checkbox" value="b" name="ch2">b
</li>
<li>
<input id="c3" type="checkbox" value="c" name="ch3">c
</li>
<li>
<input id="c4" type="checkbox" value="d" name="ch4">d
</li>
</ul>
</div>
</dd>
<br>
<br><input type="submit" value="Done!" id="bttn">
</form>
您的代码运行良好,没有任何错误。 无需更改。 看下面的片段,
另一件事是没有必要在if
条件下与 false 进行compare
。
function checkMe() { document.getElementById("frm").onsubmit = function() { if ((!document.getElementById("c1").checked) && (!document.getElementById("c2").checked) && (!document.getElementById("c3").checked) && (!document.getElementById("c4").checked)) { console.log("pleast tick atleast one"); // Check console for warning return false; } else { return true; } }; } window.onload = function() { checkMe(); }
<form action="xyz.php" id="frm" name="frm"> <select name="loc"> <option value="1">1</option> <option value="2">2</option> <option value="11">11</option> <option value="22">22</option> </select> <br> <br> <p>Services</p> <br> <dd> <div class="multiSelect"> <ul> <li> <input id="c1" type="checkbox" value="a" name="ch1">a </li> <li> <input id="c2" type="checkbox" value="b" name="ch2">b </li> <li> <input id="c3" type="checkbox" value="c" name="ch3">c </li> <li> <input id="c4" type="checkbox" value="d" name="ch4">d </li> </ul> </div> </dd> <br> <br> <input type="submit" value="Done!" id="bttn"> </form>
这是我的解决方案。
function checkMe(){
document.getElementById("frm").onsubmit=function(){
var i,b=0;
for(i=1;i<4;i++){
(function(i){
if(document.getElementById('c'+i).checked){
// if its checked, then increase b value
b++
}
})(i);
}
return ((b>0)?true:false); /* return true if b value is
bigger than 0,
b is the value of checkboxes checked */
};
}
window.onload = function() {
checkMe();
}
更好的检查方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.