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?
Something like this will make sure at least one check box is checked
document.getElementById('myform').onsubmit = function (e) { var checkbox = document.getElementsByName("del[]"), i, checked; for (i = 0; i < checkbox.length; i += 1) { checked = (checkbox[i].checked||checked===true)?true:false; } if (checked == false) { alert('Check Something!'); e.preventDefault(); return false; } else if(confirm('confirm submit?')) { alert('done!'); return true; } }
<form id="myform"> <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>
getElementsByName
returns a collection of objects. That collection does not have a checked
property, so this fails:
var checkbox = document.getElementsByName("del[]");
if (checkbox.checked == null ... //error, no "checked" property
A simple alternative would be to use document.querySelector
to look for a single checked input:
function validate() {
var checkbox= document.querySelector('input[name="del[]"]:checked');
if(!checkbox) {
alert('Please select!');
return false;
}
else return confirm('confirm submit?');
}
Also, change this:
<form method="post" action="" onsubmit="validate()">
… to this:
<form method="post" action="" onsubmit="return validate()">
Another Simple way is to create & invoke the function validate()
when the form loads & when submit button is clicked. By using checked
property we check whether the checkbox is selected or not. cbox[0]
has an index 0
which is used to access the first value (ie 1) with name="del[]"
You can do the following:
function validate() { var cbox = document.forms["myForm"]["del[]"]; if ( cbox[0].checked == false && cbox[1].checked == false && cbox[2].checked == false ) { alert("Please Check Something"); return false; } else if (confirm("Confirm Submit?")) { alert("Successfully Submited"); return true; } }
<form onload="return validate()" name="myForm"> <input type="checkbox" name="del[]" value="1"> 1 <input type="checkbox" name="del[]" value="2"> 2 <input type="checkbox" name="del[]" value="3"> 3 <input type="checkbox" name="del[]" value="4"> 4 <input type="checkbox" name="del[]" value="5"> 5 <br> <input type="submit" value="Delete" onclick="validate()"> </form>
Demo: CodePen
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.