?
Solved

Multiple form element validation using Javascript

Posted on 2003-12-02
16
Medium Priority
?
918 Views
Last Modified: 2012-05-04
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
0
Comment
Question by:fenneraj
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 3
  • 2
  • +3
16 Comments
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9859690
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
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9859711
this

document.form.FS_esc..focus();

should be

document.form.FS_esc.focus();

and replace form with your actual form name
0
 
LVL 1

Expert Comment

by:oktexasguy
ID: 9859780
<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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 16

Expert Comment

by:jaysolomon
ID: 9859838
<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
 
LVL 9

Expert Comment

by:pepsichris
ID: 9859856
<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
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9859932
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9860042
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
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9860073
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
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9860105
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
 

Author Comment

by:fenneraj
ID: 9865753
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
 
LVL 16

Accepted Solution

by:
jaysolomon earned 1400 total points
ID: 9866557
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
 
LVL 9

Expert Comment

by:pepsichris
ID: 9866585
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
 

Author Comment

by:fenneraj
ID: 9866681
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
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9866718
look at my last post, i fixed it for you.

0
 

Author Comment

by:fenneraj
ID: 9866815
Cheers Jay. All works now. Thanks to everyone else that pitched in.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9866931
glad we could help Thanks
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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

801 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