I have a form
<form method="post" action="" onsubmit="validate()">
<input type="checkbox" name="del[]" value="1">
<input type="checkbox" name="del[]" value="2">
<input type="checkbox" name="del[]" value="3">
<input type="checkbox" name="del[]" value="4">
<input type="checkbox" name="del[]" value="5">
<button type="submit" class="btn btn-danger btn-lg">delete</button>
</form>
i try to do checkbox validation with JavaScript,if people not select a check box,it will show a message,if people select one or more than one check box,
it will show the confirm alert to confirm submit.But my JavaScript is not work. The form will submit without validation.
<script>
function validate() {
var checkbox=document.getElementsByName("del[]");
if (checkbox.checked == null || x == "") {
alert("Please select!");
var check=false;
return false;
}
if(check != false && !confirm('confirm submit?')){
e.preventDefault();
return false;
}
return true;
}
</script>
How can i fix the problem?
Rick Hitchcock :
getElementsByName returns a collection of objects. That collection does not have a checked property, so this fails:\n\nvar checkbox = document.getElementsByName(\"del[]\");\nif (checkbox.checked == null ... //error, no \"checked\" property\n\n\nA simple alternative would be to use document.querySelector to look for a single checked input:\n\nfunction validate() {\n var checkbox= document.querySelector('input[name=\"del[]\"]:checked');\n if(!checkbox) {\n alert('Please select!');\n return false;\n }\n else return confirm('confirm submit?');\n}\n\n\nAlso, change this:\n\n<form method=\"post\" action=\"\" onsubmit=\"validate()\">\n\n\n… to this:\n\n<form method=\"post\" action=\"\" onsubmit=\"return validate()\">\n\n\nFiddle",
2015-04-10T18:14:02
Downgoat :
Something like this will make sure at least one check box is checked\n\n\r\n\r\ndocument.getElementById('myform').onsubmit = function (e) {\r\n var checkbox = document.getElementsByName(\"del[]\"),\r\n i,\r\n checked;\r\n for (i = 0; i < checkbox.length; i += 1) {\r\n checked = (checkbox[i].checked||checked===true)?true:false;\r\n }\r\n\r\n if (checked == false) {\r\n alert('Check Something!');\r\n e.preventDefault();\r\n return false;\r\n } else if(confirm('confirm submit?')) {\r\n alert('done!');\r\n return true;\r\n }\r\n}\r\n<form id=\"myform\">\r\n <input type=\"checkbox\" name=\"del[]\" value=\"1\">\r\n <input type=\"checkbox\" name=\"del[]\" value=\"2\">\r\n <input type=\"checkbox\" name=\"del[]\" value=\"3\">\r\n <input type=\"checkbox\" name=\"del[]\" value=\"4\">\r\n <input type=\"checkbox\" name=\"del[]\" value=\"5\">\r\n <button type=\"submit\" class=\"btn btn-danger btn-lg\">delete</button>\r\n</form>",
2015-04-10T18:09:47