jQuery validation and radio buttons

[Joe Harry]

Just stumbled upon another one: This time with the radio buton. The rendered HTML is as follows:

	<tr>
		<td><label for="gender">Gender</label></td>
		<td>
                      <input type="radio" name="userDetails.gender" id="genderMale" value="Male"/><label for="genderMale">Male</label>
                      <input type="radio" name="userDetails.gender" id="genderFemale" value="Female"/><label for="genderFemale">Female</label>
                </td>
	</tr>

I can clearly see that the problem is because of the fact that both has the same name. But I can't help it as the server side code would like below;

	<tr>
		<td><label for="gender">Gender</label></td>
		<td><s:radio name="userDetails.gender" id="gender" list="{'Male','Female'}" /></td>
	</tr>

Now this really needs a work around.

[Joe Harry]

Here is the rendered screenshot and by the way this validator plugin is really cool.

[Joe Harry]

Oopss.... I guess I enough polluted the other topic. Good that you spun this off into a new one.

All right, do you have some clues for me on this one?

[Joe Harry]

Made some progress. But now the error message is not displayed at all.

	<tr>
		<td><legend>Gender</legend></td>
		<td>	<label for="gender_male">
				<input  type="radio" id="gender_male" value="m" name="userDetails.gender" validate="required:true"/>
				Male
			</label>
			<label for="gender_female">
				<input  type="radio" id="gender_female" value="f" name="userDetails.gender"/>
				Female
			</label>
			<label for="gender" class="error blocks">Please select your gender</label>
		</td>

	</tr>

I also have added the following to my css:

.blocks { display: none; }

.error {
	color: red;
	font: 10pt verdana;
}

[Bear Bibeault]

Radio buttons must have the same name to be part of the same radio group.

[Joe Harry]

OK. Got rid of the problem:

My Struts tag looks like:

	<tr>
		<td><label for="gender">Gender</label></td>
		<td><s:radio name="userDetails.gender" id="gender" list="{'Male','Female'}" />
		<label for="userDetails.gender" class="error" style="display:none">Please select your gender</label></td>
	</tr>

My validate method for jQuery looks like:

$(document).ready(function() {
	$("#registerUserForm").validate({
		rules: {
			"userDetails.firstName": {
				required: true
			},
			"userDetails.lastName": {
				required: true
			},
			"userDetails.email": {
				required: true,
				email: true
			},
			emailConfirm: {
				required: true,
				email: true,
				equalTo: "#email"
			},
			"userDetails.gender" : {
				required: true
			},
			jCaptchaResponse: {
				required: true
			},			
                },
		messages: {
			"userDetails.firstName": "Firstname is required",
			"userDetails.lastName": "Lastname is required",
			"userDetails.email": "Valid email is required",
			emailConfirm: { 
				required: "Valid email is required",
				equalTo: "Email confirmation not correct"
			},
			jCaptchaResponse: "Please enter the text as above!"			
		}
	});
 })