Fixed issue 78. Error/Valid styling applies to all radio buttons of same group for required validation.

haacked · jzaefferer · commit 393ccabc0786 · 2011-05-05T13:34:23.000+02:00
diff --git a/jquery.validate.js b/jquery.validate.js
@@ -238,11 +238,19 @@ $.extend($.validator, {
 			else if (element.parentNode.name in this.submitted)
 				this.element(element.parentNode);
 		},
-		highlight: function( element, errorClass, validClass ) {
-			$(element).addClass(errorClass).removeClass(validClass);
+		highlight: function(element, errorClass, validClass) {
+			if (element.type === 'radio') {
+				this.findByName(element.name).addClass(errorClass).removeClass(validClass);
+			} else {
+				$(element).addClass(errorClass).removeClass(validClass);
+			}
 		},
-		unhighlight: function( element, errorClass, validClass ) {
-			$(element).removeClass(errorClass).addClass(validClass);
+		unhighlight: function(element, errorClass, validClass) {
+			if (element.type === 'radio') {
+				this.findByName(element.name).removeClass(errorClass).addClass(validClass);
+			} else {
+				$(element).removeClass(errorClass).addClass(validClass);
+			}
 		}
 	},
 
diff --git a/test/index.html b/test/index.html
@@ -139,6 +139,11 @@ <h2 id="qunit-userAgent"></h2>
 			<input id="testEmail9" class="{required:true,email:true,messages:{required:'required',email:'email'}}" />
 		</form>
 		
+		<form id="testForm10">
+			<input type="radio" name="testForm10Radio" value="1" id="testForm10Radio1" />
+			<input type="radio" name="testForm10Radio" value="2" id="testForm10Radio2" />
+		</form>
+
 		<div id="simplecontainer">
 			<h3></h3>
 		</div>
diff --git a/test/test.js b/test/test.js
@@ -124,6 +124,23 @@ test("form(): checkboxes: min/required", function() {
 	$('#form6check2').attr("checked", true);
 	ok( v.form(), 'Valid form' );
 });
+
+test("form(): radio buttons: required", function () {
+	expect( 6 );
+	var form = $('#testForm10')[0];
+
+	var v = $(form).validate({ rules: { testForm10Radio: "required"} });
+	ok(!v.form(), 'Invalid Form');
+	equals($('#testForm10Radio1').attr('class'), 'error');
+	equals($('#testForm10Radio2').attr('class'), 'error');
+
+	$('#testForm10Radio2').attr("checked", true);
+	ok(v.form(), 'Valid form');
+
+	equals($('#testForm10Radio1').attr('class'), 'valid');
+	equals($('#testForm10Radio2').attr('class'), 'valid');
+});
+
 test("form(): selects: min/required", function() {
 	expect( 3 );
 	var form = $('#testForm7')[0];
