?
Solved

jQuery: Checkbox Validation Alert

Posted on 2011-03-16
6
Medium Priority
?
828 Views
Last Modified: 2012-06-27
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

0
Comment
Question by:maeve100
  • 3
  • 3
6 Comments
 
LVL 3

Expert Comment

by:microvb
ID: 35153117
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
 

Author Comment

by:maeve100
ID: 35153275
I am using a modified version of this demo:
http://jquery.bassistance.de/validate/demo/errorcontainer-demo.html

Thanks!
0
 

Author Comment

by:maeve100
ID: 35153283
Sorry - There is no onsubmit, its just a plain page submit when the input button is clicked.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:microvb
ID: 35153372
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
 

Author Comment

by:maeve100
ID: 35159247
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
 
LVL 3

Accepted Solution

by:
microvb earned 2000 total points
ID: 35161142
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 10 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question