Multiple form element validation using Javascript

I am looking to validate wether a radio button has been selected, if it has, i need the page to check whether one of the options that the radio button opens up.

E.g.
I have a survey form, if there was a problem with the product we were surveying, we escalate the survey, this is done by clicking a radio button at the bottom of the form.

Has an escalation been rasied ? Yes <input name="escalate" type="radio" value="Y" onClick="disable_enable()">No <input name="escalate" type="radio" value="N" checked onClick="enable_disable()">

When you click the Yes option, two checkboxes below, become available. What i need to do is check that at least one of the two options has been checked. If this argument is not met, it needs to return to the page so the user can select one.

The two checkboxes are listed below:
Escalation Destination:  Field Service
        <input name="FS_esc" type="checkbox" id="FS_esc" value="YES" disabled>
        <br>
Help Desk
        <input type="checkbox" name="HD_esc" value="checkbox" id="HD_esc" disabled>

Any help is appreciated

Regards
Andrew Fenner
fennerajAsked:
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.

James RodgersWeb Applications DeveloperCommented:
if(!document.form.FS_esc.checked && !document.form.HD_esc.checked){

alert("You must make a selection.");
document.form.FS_esc..focus();
return false;
}
0
James RodgersWeb Applications DeveloperCommented:
this

document.form.FS_esc..focus();

should be

document.form.FS_esc.focus();

and replace form with your actual form name
0
oktexasguyCommented:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>

function enableCheckboxes(){
      document.getElementById("FS_esc").disabled = false;
      document.getElementById("HD_esc").disabled = false;
}

function disableCheckboxes(){
      document.getElementById("FS_esc").disabled = true;
      document.getElementById("HD_esc").disabled = true;
}

function validateAndSubmit(){
      if( !document.forms[0].elements[0].checked && !document.forms[0].elements[1].checked ){
            alert("a radio button must be selected");
      }
      else if( document.forms[0].elements[0].checked && !document.forms[0].FS_esc.checked && !document.forms[0].HD_esc.checked ){
            alert("at least one checkbox must be selected");
      }
      else{
            alert("validation passed!");
            // then submit the form
      }
}

</script>
</HEAD>

<BODY>
<form>
Escalated?<br/>
<input type="radio" name="escalated" value="yes" onclick="enableCheckboxes()"/>Yes
<br/>
<input type="radio" name="escalated" value="no" onclick="disableCheckboxes()"/>No
<br/>
Escalation Destination:  Field Service
        <input name="FS_esc" type="checkbox" id="FS_esc" value="YES" disabled>
        <br>
Help Desk
        <input type="checkbox" name="HD_esc" value="checkbox" id="HD_esc" disabled>
<br/><br/>
<input type="button" onclick="validateAndSubmit()" value="submit"/>
</form>
</BODY>
</HTML>
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.

jaysolomonCommented:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function isChecked(strField){
 if (!strField.length) return strField.checked; // not a group
 for(var i = 0; i < strField.length; i++){
      if(strField[i].checked) return true; // yes one was ticked
  }
  return false;
}
function getRadialValue(strControlName){
   for(i=0;i<strControlName.length;i++){
        if(strControlName[i].checked){
             return strControlName[i].value;
        }
   }
}
function validate(fObj){
            if(getRadialValue(fObj.rad1)== "yes"){
                  if(!isChecked(fObj.chk1)){
                        alert("You clicked the radio button, so\n you need to check a checkbox");
                              return false;
                  }
            }
      }
// -->
</script>
</head>
<body>
<form name="form1" method="post" action="" onsubmit="return validate(this);">
      <input type="radio" name="rad1" value="yes">
      <input type="radio" name="rad1" value="no">
      <input type="checkbox" name="chk1" value="checkbox">
      <input type="checkbox" name="chk2" value="checkbox">
      <input type="submit" name="btnSubmit" value="Submit">
</form>
</body>
</html>
0
pepsichrisCommented:
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function checkSelected() {
if(document.form1.escalate[0].checked == true)
{
if (document.form1.FS_esc.checked == false && document.form1.HD_esc.checked == false) {
alert('Please check the box to continue.');
return false;
}
}else
return true;
}
//  End -->
</script>

And then in the form tag: onSubmit="checkSelected();" name="form1" or whatever you want.

Haven't checked it but should work...
0
jaysolomonCommented:
i forgot to add return true

function validate(fObj){
            if(getRadialValue(fObj.rad1)== "yes"){
                  if(!isChecked(fObj.chk1)){
                        alert("You clicked the radio button, so\n you need to check a checkbox");
                              return false;
                  }
            }
            return true;
      }


to break it down for you in english.

if the radio clicked value equals "yes" the we need to make sure the checkbox is checked. If not then alert
the user that s/he needs to check atleast on of the "chk1" checkboxes.

You can name the check boxes the same name, but give them different values so you can determine on the results which was clicked.

Its not good to do this with checkboxes, they really need a different name for each.
0
GwynforWebCommented:
Tested and fully functional

<head>
<title></title>
<script>
function enable_disable(chk){
if (chk)
  {document.f1.HD_esc.disabled=false;
  document.f1.FS_esc.disabled=false}
else
  {document.f1.HD_esc.disabled=true;
   document.f1.FS_esc.disabled=true}

}

function checkdata(){
if (document.f1.elements[0].checked)
  if ((!document.f1.HD_esc.checked) && (!document.f1.FS_esc.checked))
    {alert("one box must be checked")
     return (false)
    }
  else return (true)
}
</script>
</head>

<body>

<form name="f1" action="http://google.com" onSubmit="return checkdata();">
  <p>Yes <input name="escalate" type="radio" value="Y" onClick="enable_disable(true)"> No <input
  name="escalate" type="radio" value="N" checked onClick="enable_disable(false)"><br>
  EscalationDestination: Field Service <input name="FS_esc" type="checkbox" id="FS_esc"
  value="YES" disabled> <br>
  Help Desk <input type="checkbox" name="HD_esc" value="checkbox" id="HD_esc" disabled> </p>
  <p><input type="submit" value="submit"> </p>
</form>
</body>
0
jaysolomonCommented:
and here is the fix for different name checkboxes

function validate(fObj){
            if(getRadialValue(fObj.rad1)== "yes"){
                  if(!isChecked(fObj.chk1)&&!isChecked(fObj.chk2)){
                        alert("You clicked the radio button, so\n you need to check a checkbox");
                              return false;
                  }
            }
            return true;
      }
 
0
jaysolomonCommented:
BTW

document.forms[0].elements[0] = the first form in the page and the first element in the page

an alternative to this is document.forms['formName'].elements['elementName']

0
fennerajAuthor Commented:
The soultion by oktexasguy is what i am looking for, the only problem is that if the valdiation fails then the page still passes to the form destination, i need it to come back and preferably focus on one of the two checkboxes. Some more points are up for grabs if anyone can fix it!

Regards
Andrew Fenner
0
jaysolomonCommented:
dunno why you would not want a solution like i have posted, but here is what you want

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>

function enableCheckboxes(){
     document.getElementById("FS_esc").disabled = false;
     document.getElementById("HD_esc").disabled = false;
}

function disableCheckboxes(){
     document.getElementById("FS_esc").disabled = true;
     document.getElementById("HD_esc").disabled = true;
}

function validateAndSubmit(){
     if( !document.forms[0].elements[0].checked && !document.forms[0].elements[1].checked ){
          alert("a radio button must be selected");
              return false;
     }
     else if( document.forms[0].elements[0].checked && !document.forms[0].FS_esc.checked && !document.forms[0].HD_esc.checked ){
          alert("at least one checkbox must be selected");
              return false;
     }
     else{
          alert("validation passed!");
              return true;
          // then submit the form
     }
}

</script>
</HEAD>

<BODY>
<form name="form1" onsubmit="return validateAndSubmit()">
Escalated?<br/>
<input type="radio" name="escalated" value="yes" onclick="enableCheckboxes()"/>Yes
<br/>
<input type="radio" name="escalated" value="no" onclick="disableCheckboxes()"/>No
<br/>
Escalation Destination:  Field Service
        <input name="FS_esc" type="checkbox" id="FS_esc" value="YES" disabled>
        <br>
Help Desk
        <input type="checkbox" name="HD_esc" value="checkbox" id="HD_esc" disabled>
<br/><br/>
<input type="submit" name="btnSubmit" value="submit"/>
</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
pepsichrisCommented:
What you want...

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function checkSelected() {
if(document.form1.escalate[0].checked == true)
{
if (document.form1.FS_esc.checked == false && document.form1.HD_esc.checked == false) {
alert('Please check the box to continue.');
document.form1.FS_esc.checked=true;
}
}else
document.form1.submit();
}
//  End -->
</script>

and then:
<input type="button" name="Submit" onClick="checkSelected();" value="Submit">
0
fennerajAuthor Commented:
Okay i have now got myself in a muddle, Jay the reason i did not use yours was that it was confusing me when i tried to modify it. All though i have done the same here now. The main problem i am getting is that because i have an action in the form (in this case Google, just for example purposes), when i hit the submit button, the validation rules work (either say passed or please check a check box), but even if no check box is selected, it still passes over to the action URL. I need, to be able to send the user back to the check boxes, i understand that i can set the focus of this if the valdation fails, but the form still passes to the action url.

This is what i have so far
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>

function enableCheckboxes(){
     document.getElementById("FS_esc").disabled = false;
     document.getElementById("HD_esc").disabled = false;
}

function disableCheckboxes(){
     document.getElementById("FS_esc").disabled = true;
     document.getElementById("HD_esc").disabled = true;
}

function validateAndSubmit(){
     if( !document.forms[0].elements[0].checked && !document.forms[0].elements[1].checked ){
          alert("a radio button must be selected");
     }
     else if( document.forms[0].elements[0].checked && !document.forms[0].FS_esc.checked && !document.forms[0].HD_esc.checked ){
          alert("at least one checkbox must be selected");
            }
     else{
          alert("validation passed!");
            return true;
          // then submit the form
     }
}


</script>
</HEAD>

<BODY>
<form method="post" action="http://www.google.com/">
Escalated?<br/>
<input type="radio" name="escalated" value="yes" onclick="enableCheckboxes()"/>Yes
<br/>
<input type="radio" name="escalated" value="no" onclick="disableCheckboxes()"/>No
<br/>
Escalation Destination:  Field Service
        <input name="FS_esc" type="checkbox" id="FS_esc" value="YES" disabled>
        <br>
Help Desk
        <input type="checkbox" name="HD_esc" value="checkbox" id="HD_esc" disabled>
<br/><br/>
<input type="submit" onclick="validateAndSubmit()" value="submit"/>
</form>
</BODY>
</HTML>

As you can see, i am no expert at this. So any help in finding the solution would be great.

Regards
Andrew Fenner
0
jaysolomonCommented:
look at my last post, i fixed it for you.

0
fennerajAuthor Commented:
Cheers Jay. All works now. Thanks to everyone else that pitched in.
0
jaysolomonCommented:
glad we could help Thanks
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.