[jQuery] Validation Plugin Beta 2 Bug - Radio Buttons

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:st1="urn:schemas-microsoft-com:office:smarttags" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="PostalCode"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="State"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="City"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="place"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="Street"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="address"/>

<style>

</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
First I would like to say that this plugin is absolutely
amazing…excellent work Jörn! <o:p></o:p>
<o:p> </o:p>
Now on to my problem: I’ve noticed that the validation
plugin doesn’t support radio buttons with name="data[FormItem][38]"
specified. It will correctly validate the radio button group (for instance, if
required=true if will display the error label indicating the field is required
if a radio button was not clicked), however, it will not submit the form once a
valid option is chosen.<o:p></o:p>
<o:p> </o:p>
If I change the name to not use the [] array format then the
submitHandler will fire correctly. Unfortunately this is not an option for me
as the [] array format is used for all CakePHP form elements. The validation
plugin handles all other form elements with this format correctly. I have added
a short test case below. Clicking submit will correctly display the error label
if an item is not chosen. Clicking a radio button and submitting the form again
will not fire the submitHandler. If you change the radio group name to “test”
then everything works as expected.<o:p></o:p>
<o:p> </o:p>
Thank you for any help you can provide.<o:p></o:p>
<o:p> </o:p>
<?xml
version="1.0" encoding="ISO-8859-1" ?><o:p></o:p>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><o:p></o:p>
<html
xmlns="http://www.w3.org/1999/xhtml"><o:p></o:p>
<head><o:p></o:p>
<meta
http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" /><o:p></o:p>
<title>Test for jQuery
validate() plugin</title><o:p></o:p>
<link
rel="stylesheet" type="text/css" media="screen"
href="css/screen.css" /><o:p></o:p>
<script
src="js/jquery.js"
type="text/javascript"></script><o:p></o:p>
<script
src="js/cmxforms.js"
type="text/javascript"></script><o:p></o:p>
<script src="js/metadata.js"
type="text/javascript"></script><o:p></o:p>
<script
src="../jquery.validate.js"
type="text/javascript"></script><o:p></o:p>
<script
type="text/javascript"><o:p></o:p>
 $(document).ready(function()
{<o:p></o:p>
 // validate the
form when it is submitted<o:p></o:p>
 $.validator.setDefaults({<o:p></o:p>
 debug:
false,<o:p></o:p>
 focusInvalidElement:
true,<o:p></o:p>
 submitHandler:
function(form) {<o:p></o:p>
 alert("submit");<o:p></o:p>
 }<o:p></o:p>
 });<o:p></o:p>
 $("#form1").validate();<o:p></o:p>
<o:p> </o:p>
 });<o:p></o:p>
</script><o:p></o:p>
</head><o:p></o:p>
<body><o:p></o:p>
<form
class="cmxform" id="form1" method="get"
action=""><o:p></o:p>
 <fieldset><o:p></o:p>
 <legend>Validating a
form with a radio and checkbox buttons</legend><o:p></o:p>
 <fieldset
class="f-checkbox-wrap"><o:p></o:p>
 *Makes<o:p></o:p>
 <label
for="FormItem380"><o:p></o:p>
 <input
type="radio" name="data[FormItem][38]"
id="FormItem380" value="Honda" class="f-radio
{required:true}" /><o:p></o:p>
 Honda</label><o:p></o:p>
 <label
for="FormItem381"><o:p></o:p>
 <input
type="radio" name="data[FormItem][38]"
id="FormItem381" value="Hyundai" class="f-radio"
/><o:p></o:p>
 Hyundai</label><o:p></o:p>
 <label
for="FormItem382"><o:p></o:p>
 <input
type="radio" name="data[FormItem][38]"
id="FormItem382" value="<st1:City w:st="on"><st1:place w:st="on">Toyota</st1:place></st1:City>"
class="f-radio" /><o:p></o:p>
 <st1:City w:st="on"><st1:place
w:st="on">Toyota</st1:place></st1:City></label><o:p></o:p>
 <label
for="data[FormItem][38]" class="error">Please select
your family status.</label><o:p></o:p>
 </fieldset><o:p></o:p>

<o:p></o:p>

<input
class="submit" type="submit" value="Submit"/><o:p></o:p>
 <o:p></o:p>
 </fieldset><o:p></o:p>
</form><o:p></o:p>
</body><o:p></o:p>
</html><o:p></o:p>
<o:p> </o:p>
Ryan
Rose
Vice President
Digiwize, Inc.
<st1:Street w:st="on"><st1:address w:st="on">One Technology Drive</st1:address></st1:Street>
<st1:place w:st="on"><st1:City w:st="on">Tolland</st1:City>, <st1:State w:st="on">CT</st1:State>
<st1:PostalCode w:st="on">06084</st1:PostalCode></st1:place>
e: <a href="mailto:ryan@digiwize.com">ryan@digiwize.com</a>
p: 860.730.2631
http://www.digiwize.com<o:p></o:p>
<o:p> </o:p>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Topic Participants
ryan

[jQuery] Validation Plugin Beta 2 Bug - Radio Buttons

[jQuery] Validation Plugin Beta 2 Bug - Radio Buttons

Topic Participants

ryan