Solved

jQuery: Checkbox Validation Alert

Posted on 2011-03-16
6
805 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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 500 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
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)

867 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now