This Post Is About Showing You About Validating A Check Button Using Javascript To Verify If The Check Button Has Been Checked [2194], Last Updated: Mon Jun 24, 2024
Webune Tutorials
Sun Dec 20, 2009
3 Comments
587 Visits
Welcome to Webune Support Forums
We provide web hosting to people just like you who are just beginning to program their websites. We provide excellent support service, that is why we have created this post to show you how you can make a checkbox validate.
Javascript is an important tool for validating your forms
if you did not put any kind of validation on your forms, then you will most likely get alot of un desired results when your users submit the information you are requesting.
in this post we will show you how you can use javascript to check and verify that the users are putting what we want.
the example we are going to use is a simple form, lets say you have a forum and you want your users to agree to your terms of service, if they dont check the agree checkbox, then you will show them a pop up message letting them know that they have to agree to continue.
for example, lets say i have this simple form:
Agree To Terms
if you click on the Agree button above, nothing will happen, since i have not put any javascript validation on it.
Now we are going to put some javascript to our form for validating the checkbox: try it!
Agree To Terms
Try clicking on the button without checking the agree checkbox, and you will see a popup message telling you that you have to agree.
you can download the code i used in the attachments section at the bottom of this post
javascript-checkbox-validation.html
webune
Sun Dec 20, 2009
if you prefer to create the files yourself, i am using a windows xp computer so i am using notepad to create my html files. so open a blank notepad, copy and paste the following code:
<script type="text/javascript" charset="iso-8859-1">
function Check_Fields() {
var Agree = document.getElementById('Agree').checked;
if(!Agree){
window.alert("You Must Agree To Terms");
}
}
</script>
<div style="border: 1px solid #333; width:200px; padding:5px;">
<input name="" type="checkbox" id="Agree" value="1"> Agree To Terms<br>
<input type="button" value="Agree" onClick="Check_Fields();"/>
</div><br>
<a href="http://www.webune.com">
<img src="http://www.webune.com/images/headers/default_logo.jpg" border="0" />
</a><br>
Script Provided by <a href="http://www.webune.com">Webune.com</a>
now save the file as javascript-checkbox-validation.html
after you have saved the file, open it with your browser and see it in action
now save the file as javascript-checkbox-validation.html
after you have saved the file, open it with your browser and see it in action
let me know what you think