• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1109
  • Last Modified:

validation of radio button

i have a form with 4textboxes tied to radio buttons. the validation should be done only for the textbox whose radio button is selected. pl suggest.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="http://code.jquery.com/jquery-latest.js"></script>
    rules: {
      boy: "required",
      girl: "required",
	  man: "required",
      woman: "required"
		messages: {
			boy: {
				required: "Please enter a boy",
				minlength: "Your boy must consist of at least 4 characters"
			girl: {
				required: "Please enter a girl",
				minlength: "Your girl must consist of at least 4 characters"
			man: {
				required: "Please enter a man",
				minlength: "Your man must consist of at least 4 characters"
			woman: {
				required: "Please enter a woman",
				minlength: "Your woman must consist of at least 4 characters"
<form name="bb">
<div id="mybuttonradios">
<input type="radio" name="a" value="b" />boy<input type="text" name="b" onfocus="this.parentNode.getElementsByTagName('input')[0].checked=true;" /><br/>
<input type="radio" name="a" value="g" />girl<input type="text" name="g" onfocus="this.parentNode.getElementsByTagName('input')[2].checked=true;" /><br/>
<input type="radio" name="a" value="m" />man<input type="text" name="m" onfocus="this.parentNode.getElementsByTagName('input')[4].checked=true;" /><br/>
<input type="radio" name="a" value="w" />woman <input type="text" name="w" onfocus="this.parentNode.getElementsByTagName('input')[6].checked=true;" />
<input type="button" value="check">

Open in new window

  • 2
  • 2
2 Solutions
yingwhoAuthor Commented:

my question is different as it has tied up with textboxes, we check if the radio button selected and the associated text box empty? and shout not validate other textboxes even if the have values. not regular radio group. pl advice.
instead of:
 boy: "required",

you need to specify a "dependency expression". Since boy depends on the first radio being checked, that should be:
 boy: {required:'input[value="b"]:checked'}
likewise for girl:
 girl: {required:'input[value="g"]:checked'}

also, notice that it is an object not a string. Lastly, your "message" section has messages for "required" and for minlength, BUT you have no minlength in the rules. You need to add them in the rules as well:

 boy: {required:'input[value="b"]:checked', minlength: 4}
 girl: {required:'input[value="g"]:checked', minlength: 4}

etc. Wasn't that easy?

yingwhoAuthor Commented:
thanks guys.
Thanks for the points!

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.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now