Radio button validation, varying number of groups

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>
LVL 18
SquareHeadAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pravin AsarPrincipal Systems EngineerCommented:
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
SquareHeadAuthor Commented:
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
Pravin AsarPrincipal Systems EngineerCommented:
Oops.....I know what happened.. new code coming soon...

-PA
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Pravin AsarPrincipal Systems EngineerCommented:
<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
SquareHeadAuthor Commented:
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
Pravin AsarPrincipal Systems EngineerCommented:
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
SquareHeadAuthor Commented:
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
Pravin AsarPrincipal Systems EngineerCommented:
I checked, it works fine for me...
check the my example as it is..


Post your code..
0
SquareHeadAuthor Commented:
<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
SquareHeadAuthor Commented:
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
Pravin AsarPrincipal Systems EngineerCommented:
Change the line ...


<input type="submit" value="Submit" onClick="return (validatePage(this.form));">
0
Pravin AsarPrincipal Systems EngineerCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SquareHeadAuthor Commented:
There ya go. That seems to work fine. Thanks
0
Pravin AsarPrincipal Systems EngineerCommented:
0
SquareHeadAuthor Commented:
Thanks. I appreciate the effort.
0
Pravin AsarPrincipal Systems EngineerCommented:
You are Welcome.

_PA
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.