Solved

jQuery: Checkbox Validation Alert

Posted on 2011-03-16
6
803 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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 …
The viewer will learn how to dynamically set the form action using jQuery.
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…

743 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

13 Experts available now in Live!

Get 1:1 Help Now