Solved

jQuery: Checkbox Validation Alert

Posted on 2011-03-16
6
812 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Suggested Solutions

Title # Comments Views Activity
email validation 9 51
How to calculate height of a text using jquery 3 43
Duplicate Elements with JS / jQuery 3 26
Calculating percentage 2 33
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
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 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)

730 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