Validate all radio buttons

tonyyeb · 18 Jan 2011 at 09:25

Hi all

I have a page that dynamically generates a form with a varying amount and groups of buttons. I would like to validate that each group has a choice made. Anyone know of any example code that would help? I'm thinking JavaScript.

Thanks

otemu · 18 Jan 2011 at 09:43

Hi,

You could use JQuery to validate the form, quite easy to setup and well documented
Try this plugin here http://docs.jquery.com/Plugins/validation

Various different demos:
http://jquery.bassistance.de/validate/demo/milk/
http://jquery.bassistance.de/validate/demo/multipart/
http://jquery.bassistance.de/validate/demo/marketo/

tonyyeb · 18 Jan 2011 at 09:59

Works great... but not in IE. Great... My web page will be exclusively used on IE8.

Tripnologist · 18 Jan 2011 at 10:51

Since when does jquery validate not work in IE?

GravyMonster · 18 Jan 2011 at 11:01

^ Same.

I've used it on lots of sites and never had issues. Any chance you could post your code.

tonyyeb · 18 Jan 2011 at 11:06

I copied the example code from http://docs.jquery.com/Plugins/validation

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
  <script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
  </script>
  
</head>
<body>
  

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>

The example on the page works but copying into a separate standalone page doesn't.

tonyyeb · 18 Jan 2011 at 11:14

Working now, had to download my own copy of jquery.validate.js as for some reason the hotlink was denied access through IE... very odd.

tonyyeb · 18 Jan 2011 at 11:42

Ok, got it working but I want to move the error message to the left of the radio buttons. See below for what is happening now:

EDIT: Sorted. Hacked around with the CSS until it looked right.

Pho · 18 Jan 2011 at 15:24

Rather than hacking with css you can use the errorPlacement method to insert it before your element or do whatever you want with it.

When coding JavaScript for IE I've noticed it can be very picky about commas, e.g. if you had a validation rule for an email (or anywhere which uses JSON like this):

Code:

     email: {
       required: true,
       email: true,
     }

The extra comma after email: true would likely break in IE. A pain to find!