?
Solved

Radio button validation, varying number of groups

Posted on 2006-04-07
16
Medium Priority
?
380 Views
Last Modified: 2008-02-26
I have a form that will have:

1. A variable number of groups of radio buttons, but at least one group.
2. Each group will have a variable number of actual radio buttons, but at least two.
3. Two text fields.

I need a script that will ensure that a radio button is checked in each group, and the 2 text fields each have a value. This needs to work for any number of radio button groups, and for any number of radio buttons per group.

Thanks.

Example form:

<form name="myForm">
<table>
     <tr>
          <td align="right">Question 1:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_1" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_1" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_1" value="3"></td>
     </tr>
     <tr>
          <td align="right">Question 2:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_2" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_2" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_2" value="3"></td>
     </tr>
     <tr>
          <td>4 -- <input type="radio" name="rdoQ_2" value="4"></td>
     </tr>
     <tr>
          <td>5 -- <input type="radio" name="rdoQ_2" value="5"></td>
     </tr>
</table>
<input type="text" name="txt1"><br>
<input type="text" name="txt2"><br>
<input type="submit" value="Submit">
</form>
0
Comment
Question by:SquareHead
  • 9
  • 7
16 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16403382
Here is a working example... hope this serves your purpose...


<html>
<head>
<title>Radio Validate Document</title>
</head>

<body>
<script language="javascript">
var radNames = new Array();
var radValues = new Array();
var radCnt = 0;
function UpdateRadioList (radObj) {
      var bFound = false;
      for (var rx=0; rx < radCnt; rx++)  {
            if (radObj.name.match(radNames[rx])) {
                  bFound = true;
                  break;
            }
      }
      if (!bFound) {
            radNames[radCnt] = radObj.name;
            radValues[radCnt]  = '';
            radCnt++;
      }
}

function UpdateValueList (radObj) {
      for (var rx=0; rx < radNames.length; rx++)  {
            if (radObj.name.match(radNames[rx])) {
                  radValues[rx] = radObj.value;
                  break;
            }
      }
}
function CheckForSelection () {
      for (var rx=0; rx < radValues.length; rx++)  {
            if (!radValues[rx].length) {
                  alert ('Radio Button ' + radNames[rx] + ' is not selected');
                  return false;
            }
      }
      return true;
}
function validatePage(form) {
   var elems = form.elements;
   for (var ix=0; ix < elems.length; ix++) {
               var elem = elems[ix];
            if (elem.type.match('radio')) {
                  UpdateRadioList(elem);
                  if (elem.checked) {
                        UpdateValueList(elem);
                  }
            }
            if (elem.type.match('text')) {
                  if (!elem.value.length) {
                        alert ('Text Field ' + elem.name + ' has no value');
                  }
            }
   }
   if (CheckForSelection()) {
         alert ('OKAY');
   }
   else {
         return false;
   }
   return (CheckForSelection());
}
</script>
<form name="myForm">
<table>
     <tr>
          <td align="right">Question 1:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_1" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_1" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_1" value="3"></td>
     </tr>
     <tr>
          <td align="right">Question 2:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_2" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_2" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_2" value="3"></td>
     </tr>
     <tr>
          <td>4 -- <input type="radio" name="rdoQ_2" value="4"></td>
     </tr>
     <tr>
          <td>5 -- <input type="radio" name="rdoQ_2" value="5"></td>
     </tr>
</table>
<input type="text" name="txt1"><br>
<input type="text" name="txt2"><br>
<input type="submit" value="Submit" onclick="return (validatePage(this.form));">
</form>
</body>
</html>
0
 
LVL 18

Author Comment

by:SquareHead
ID: 16403532
Close. Using your example above, if I check a radio button in each of the two groups, but leave the text fields blank, I get the alerts, but also get the "OK" alert, and then the form submits...
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16403662
Oops.....I know what happened.. new code coming soon...

-PA
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16403772
<html>
<head>
<title>Radio Validate Document</title>
</head>

<body>
<script language="javascript">
var radNames = new Array();
var radValues = new Array();
var radCnt = 0;
var txtFlds = new Array();
var txtCnt = 0;
function UpdateFieldList (radObj) {
      var bFound = false;
      for (var rx=0; rx < radCnt; rx++)  {
            if (radObj.name.match(radNames[rx])) {
                  bFound = true;
                  break;
            }
      }
      if (!bFound) {
            radNames[radCnt] = radObj.name;
            radValues[radCnt]  = '';
            radCnt++;
      }
}

function UpdateValueList (radObj) {
      for (var rx=0; rx < radNames.length; rx++)  {
            if (radObj.name.match(radNames[rx])) {
                  radValues[rx] = radObj.value;
                  break;
            }
      }
}
function CheckForSelection () {
      var retCode = true;
      for (var rx=0; rx < radValues.length; rx++)  {
            if (!radValues[rx].length) {
                  alert ('Radio Button ' + radNames[rx] + ' is not selected');
                  retCode = false;
            }
      }
      for (var tx=0; tx < txtFlds.length; tx++) {
            if (!txtFlds[tx].value.length) {
                  alert ('Text Field ' + txtFlds[tx].name + ' has no value');
                  retCode = false;
            }
      }
      return (retCode);
}
function validatePage(form) {
   var elems = form.elements;
   for (var ix=0; ix < elems.length; ix++) {
               var elem = elems[ix];
            if (elem.type.match('radio')) {
                  UpdateFieldList(elem);
                  if (elem.checked) {
                        UpdateValueList(elem);
                  }
            }
            if (elem.type.match('text')) {
                  txtFlds[txtCnt++] = elem;
            }
   }
   if (CheckForSelection()) {
         alert ('OKAY');
   }
   else {
         return false;
   }
   return (CheckForSelection());
}
</script>
<form name="myForm">
<table>
     <tr>
          <td align="right">Question 1:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_1" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_1" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_1" value="3"></td>
     </tr>
     <tr>
          <td align="right">Question 2:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_2" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_2" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_2" value="3"></td>
     </tr>
     <tr>
          <td>4 -- <input type="radio" name="rdoQ_2" value="4"></td>
     </tr>
     <tr>
          <td>5 -- <input type="radio" name="rdoQ_2" value="5"></td>
     </tr>
</table>
<input type="text" name="txt1"><br>
<input type="text" name="txt2"><br>
<input type="submit" value="Submit" onClick="return (validatePage(this.form));">
</form>
</body>
</html>
0
 
LVL 18

Author Comment

by:SquareHead
ID: 16404128
That's it, with one minor issue.

Let's say I click submit with 2 things wrong: one of the radio button groups does not have a selection, and one of the text fields is empty. If I correct the radio group by making a selection, and then click submit again before correcting the empty text field, then I am alerted twice for the empty text field.

In fact, for each time I click submit with an empty text field, I am alerted that many more times...

Another example:

All fields are ok except one text field. I click submit. I get an alert. I click the "ok" in the alert, but do not correct the empty field. I click submit again. Now I get 2 alerts for that field. I click "ok" in each of them, clcik submit again, now 3 alerts...

Is there a way to limit this to one alert?

Thanks
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16404677
This should do it..
Added a ResetCounters()..



<html>
<head>
<title>Radio Validate Document</title>
</head>

<body>
<script language="javascript">
var radNames = new Array();
var radValues = new Array();
var radCnt = 0;
var txtFlds = new Array();
var txtCnt = 0;
function ResetCounters() {
      radCnt =0;
      txtCnt =0;
}
function UpdateFieldList (radObj) {
      var bFound = false;
      for (var rx=0; rx < radCnt; rx++)  {
            if (radObj.name.match(radNames[rx])) {
                  bFound = true;
                  break;
            }
      }
      if (!bFound) {
            radNames[radCnt] = radObj.name;
            radValues[radCnt]  = '';
            radCnt++;
      }
}

function UpdateValueList (radObj) {
      for (var rx=0; rx < radNames.length; rx++)  {
            if (radObj.name.match(radNames[rx])) {
                  radValues[rx] = radObj.value;
                  break;
            }
      }
}
function CheckForSelection () {
      var retCode = true;
      for (var rx=0; rx < radValues.length; rx++)  {
            if (!radValues[rx].length) {
                  alert ('Radio Button ' + radNames[rx] + ' is not

selected');
                  retCode = false;
            }
      }
      for (var tx=0; tx < txtFlds.length; tx++) {
            if (!txtFlds[tx].value.length) {
                  alert ('Text Field ' + txtFlds[tx].name + ' has no

value');
                  retCode = false;
            }
      }
      return (retCode);
}

function validatePage(form) {
   ResetCounters();
   var elems = form.elements;
   for (var ix=0; ix < elems.length; ix++) {
               var elem = elems[ix];
            if (elem.type.match('radio')) {
                  UpdateFieldList(elem);
                  if (elem.checked) {
                        UpdateValueList(elem);
                  }
            }
            if (elem.type.match('text')) {
                  txtFlds[txtCnt++] = elem;
            }
   }
   if (CheckForSelection()) {
         alert ('OKAY');
   }
   else {
         return false;
   }
   return (CheckForSelection());
}
</script>
<form name="myForm">
<table>
     <tr>
          <td align="right">Question 1:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_1" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_1" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_1" value="3"></td>
     </tr>
     <tr>
          <td align="right">Question 2:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_2" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_2" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_2" value="3"></td>
     </tr>
     <tr>
          <td>4 -- <input type="radio" name="rdoQ_2" value="4"></td>
     </tr>
     <tr>
          <td>5 -- <input type="radio" name="rdoQ_2" value="5"></td>
     </tr>
</table>
<input type="text" name="txt1"><br>
<input type="text" name="txt2"><br>
<input type="submit" value="Submit" onClick="return

(validatePage(this.form));">
</form>
</body>
</html>
0
 
LVL 18

Author Comment

by:SquareHead
ID: 16404848
Hmm, now it submits regardless of whether or not selections are made and/or text boxes have values... I do notice that at least 2 lines wrapped in the above code. (The alert lines.) I straightened this out but still no validation is occurring...
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16404889
I checked, it works fine for me...
check the my example as it is..


Post your code..
0
 
LVL 18

Author Comment

by:SquareHead
ID: 16404918
<html>
<head>
<title>Radio Validate Document</title>
</head>

<body>
<script language="javascript">
var radNames = new Array();
var radValues = new Array();
var radCnt = 0;
var txtFlds = new Array();
var txtCnt = 0;
function ResetCounters() {
     radCnt =0;
     txtCnt =0;
}
function UpdateFieldList (radObj) {
     var bFound = false;
     for (var rx=0; rx < radCnt; rx++)  {
          if (radObj.name.match(radNames[rx])) {
               bFound = true;
               break;
          }
     }
     if (!bFound) {
          radNames[radCnt] = radObj.name;
          radValues[radCnt]  = '';
          radCnt++;
     }
}

function UpdateValueList (radObj) {
     for (var rx=0; rx < radNames.length; rx++)  {
          if (radObj.name.match(radNames[rx])) {
               radValues[rx] = radObj.value;
               break;
          }
     }
}
function CheckForSelection () {
     var retCode = true;
     for (var rx=0; rx < radValues.length; rx++)  {
          if (!radValues[rx].length) {
               alert ('Radio Button ' + radNames[rx] + ' is not selected');
               retCode = false;
          }
     }
     for (var tx=0; tx < txtFlds.length; tx++) {
          if (!txtFlds[tx].value.length) {
               alert ('Text Field ' + txtFlds[tx].name + ' has no value');
               retCode = false;
          }
     }
     return (retCode);
}

function validatePage(form) {
   ResetCounters();
   var elems = form.elements;
   for (var ix=0; ix < elems.length; ix++) {
             var elem = elems[ix];
          if (elem.type.match('radio')) {
               UpdateFieldList(elem);
               if (elem.checked) {
                    UpdateValueList(elem);
               }
          }
          if (elem.type.match('text')) {
               txtFlds[txtCnt++] = elem;
          }
   }
   if (CheckForSelection()) {
        alert ('OKAY');
   }
   else {
        return false;
   }
   return (CheckForSelection());
}
</script>
<form name="myForm">
<table>
     <tr>
          <td align="right">Question 1:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_1" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_1" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_1" value="3"></td>
     </tr>
     <tr>
          <td align="right">Question 2:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_2" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_2" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_2" value="3"></td>
     </tr>
     <tr>
          <td>4 -- <input type="radio" name="rdoQ_2" value="4"></td>
     </tr>
     <tr>
          <td>5 -- <input type="radio" name="rdoQ_2" value="5"></td>
     </tr>
</table>
<input type="text" name="txt1"><br>
<input type="text" name="txt2"><br>
<input type="submit" value="Submit" onClick="return

(validatePage(this.form));">
</form>
</body>
</html>
0
 
LVL 18

Author Comment

by:SquareHead
ID: 16404929
I am using your code as is except for these lines:

               alert ('Radio Button ' + radNames[rx] + ' is not

selected');

and:

               alert ('Text Field ' + txtFlds[tx].name + ' has no

value');


Which I changed to:

               alert ('Radio Button ' + radNames[rx] + ' is not selected');

And:

               alert ('Text Field ' + txtFlds[tx].name + ' has no value');
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16404932
Change the line ...


<input type="submit" value="Submit" onClick="return (validatePage(this.form));">
0
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 2000 total points
ID: 16404935
Take this one

<html>
<head>
<title>Radio Validate Document</title>
</head>

<body>
<script language="javascript">
var radNames = new Array();
var radValues = new Array();
var radCnt = 0;
var txtFlds = new Array();
var txtCnt = 0;
function ResetCounters() {
      radCnt =0;
      txtCnt =0;
}
function UpdateFieldList (radObj) {
      var bFound = false;
      for (var rx=0; rx < radCnt; rx++)  {
            if (radObj.name.match(radNames[rx])) {
                  bFound = true;
                  break;
            }
      }
      if (!bFound) {
            radNames[radCnt] = radObj.name;
            radValues[radCnt]  = '';
            radCnt++;
      }
}

function UpdateValueList (radObj) {
      for (var rx=0; rx < radNames.length; rx++)  {
            if (radObj.name.match(radNames[rx])) {
                  radValues[rx] = radObj.value;
                  break;
            }
      }
}
function CheckForSelection () {
      var retCode = true;
      for (var rx=0; rx < radValues.length; rx++)  {
            if (!radValues[rx].length) {
                  alert ('Radio Button ' + radNames[rx] + ' is not selected');
                  retCode = false;
            }
      }
      for (var tx=0; tx < txtFlds.length; tx++) {
            if (!txtFlds[tx].value.length) {
                  alert ('Text Field ' + txtFlds[tx].name + ' has no value');
                  retCode = false;
            }
      }
      if (retCode) { alert ('Every thing Okay'); }
      
      return (retCode);
}

function validatePage(form) {
   ResetCounters();
   var elems = form.elements;
   for (var ix=0; ix < elems.length; ix++) {
               var elem = elems[ix];
            if (elem.type.match('radio')) {
                  UpdateFieldList(elem);
                  if (elem.checked) {
                        UpdateValueList(elem);
                  }
            }
            if (elem.type.match('text')) {
                  txtFlds[txtCnt++] = elem;
            }
   }
   return (CheckForSelection());
}
</script>
<form name="myForm">
<table>
     <tr>
          <td align="right">Question 1:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_1" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_1" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_1" value="3"></td>
     </tr>
     <tr>
          <td align="right">Question 2:</td>
     </tr>
     <tr>
          <td>1 -- <input type="radio" name="rdoQ_2" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="radio" name="rdoQ_2" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="radio" name="rdoQ_2" value="3"></td>
     </tr>
     <tr>
          <td>4 -- <input type="radio" name="rdoQ_2" value="4"></td>
     </tr>
     <tr>
          <td>5 -- <input type="radio" name="rdoQ_2" value="5"></td>
     </tr>
</table>
<input type="text" name="txt1"><br>
<input type="text" name="txt2"><br>
<input type="submit" value="Submit" onClick="return (validatePage(this.form));">
</form>
</body>
</html>
0
 
LVL 18

Author Comment

by:SquareHead
ID: 16404943
There ya go. That seems to work fine. Thanks
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16404952
0
 
LVL 18

Author Comment

by:SquareHead
ID: 16404962
Thanks. I appreciate the effort.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16409991
You are Welcome.

_PA
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question