jQuery: Checkbox Validation Alert

Hi there,

I am new to jQuery and am having some troubles with validation.  I have a checkbox to agree to our policy and I want an alert(); to happen if the user submits the page without having checked it.  Right now it will display an text message on the page if they haven't checked the checkbox, which I want, but I also want that alert() to happen.

What am I doing wrong?  The below code doesn't function at all, but how would I change it to get the desired effect?

Thanks.
jQuery.validator.addMethod("agree", function(value, element) {
	if ($('#terms').val() != "on") { 
alert("Please click to agree."); }	
			
	}, "");

....

<input name='terms' id='terms' class="required agree"  type='checkbox'>

Open in new window

maeve100Asked:
Who is Participating?
 
microvbConnect With a Mentor Commented:
What if you did this:

<form id="myform" method="post">
        <input type="checkbox" class="checkbox" id="terms" name="terms" />
        <input type="submit" class="submit" value="Submit" onclick="javascript:if(!document.myform.terms.checked) { alert('You must agree to the terms'); return false; }" />
</form>

Open in new window

0
 
microvbCommented:
maeve100,

Which "validator" plugin for jQuery are you using ?   I would like to do some testing. I believe I see the problem, but want to make certain before posting a solution.

This might be a stupid question, but are you hooking the onsubmit for the form, or is the page just submitting directly.

Thanks,

Dan.
0
 
maeve100Author Commented:
I am using a modified version of this demo:
http://jquery.bassistance.de/validate/demo/errorcontainer-demo.html

Thanks!
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
maeve100Author Commented:
Sorry - There is no onsubmit, its just a plain page submit when the input button is clicked.
0
 
microvbCommented:
maeve100:

The example here looks more current, and provides details on how to validate a checkbox as required.

http://jquery.bassistance.de/validate/demo/

It is different than your current code though as you no longer need to specify "required" in the class param of the input tag.

Javascript (just to validate checkbox)
$().ready(function() {
       $("#myform").validate({
		rules: {
			terms: "required"
		},
		messages: {
			terms: "Please accept our policy"
		}
	});
});

Open in new window


And the elements
<form id="myform" method="post">
	<input type="checkbox" class="checkbox" id="terms" name="terms" />
        <input type="submit" class="submit" value="Submit" />
</form>

Open in new window


It seems that when they updated their code to support checkboxes the developer also simplified the process of validation a bit more.

Dan
0
 
maeve100Author Commented:
Unfortunately, that doesn't seem to give an alert() to the screen.  The link I sent was to the version that I am using - because I need to have the error codes display in a separate box (as in the demo I sent) not inline with the form (in the link you included.)  But either way, I need the alert that displays on page AND a Javascript alert("Please click to agree.").

Thanks!

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.