Jump to content

Checkbox validation.

phpSensei

By phpSensei
in Javascript Help

Recommended Posts

phpSensei Advanced Member

phpSensei

Posted
Posted

I require a little script help regarding somewhat of a checkbox "check/unchecked" detector, and it should validate other sections of the form depending if the checkbox is true (checked) or false (unchecked)...

 

 

<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false;}
else {return true}
}
}

function validate_box(field)
{
with (field)
{
if(document.frm.C1.checked){
   return true;
   }
   else
   {
   
   return false;
   
   }
}
}
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false;}
else {return true;}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_required(fname,"First Name must be filled out!")==false)
  {fname.focus();return false;}
  
else if (validate_required(lname,"Last Name must be filled out!")==false)
  {lname.focus();return false;}
else if (validate_required(title,"Title must be filled out!")==false)
  {title.focus();return false;}
else if (validate_required(title2,"Company must be filled out!")==false)
  {title2.focus();return false;}  
  
  
  else if (validate_box(C1)==true)
    {

if(validate_required(email,"email2 must be filled out!")==false)
{

email.focus();return false;


}

}

  else if (validate_required(phone1,"Phone Box 1 must be filled out!")==false)
  {phone1.focus();return false;}

else if (validate_required(phone2,"Phone Box 2 must be filled out!")==false)
  {phone2.focus();return false;}  
   else if (validate_required(phone3,"Phone Box 3 must be filled out!")==false)
  {phone3.focus();return false;}  
  }
}
</script>

 

AS you can see the code is written by me, and I am new to Javascript. Also I am not the best but this little piece of code:

 

function validate_box(field)
{
with (field)
{
if(document.frm.C1.checked){
   return true;
   }
   else
   {
   
   return false;
   
   }
}
}
</script>

 

Is suposed to check if the checkbox is checked, it returns true once that is set. Then we use the function here

 

 

  else if (validate_box(C1)==true)
    {

if(validate_required(email,"email2 must be filled out!")==false)
{

email.focus();return false;


}

}

 

This means if the checkbox is checked, then the email field cant be empty, else it alerts you. It doesn't work. Here is the form

 

<form action="mail.php" onsubmit="return validate_form(this)" name="frm" method="post">
<br>
<table width="469" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
<tr>
<td width="129" height="19" valign="top">First Name: </td>
    <td colspan="3" valign="top"><input type="text" name="fname" size="32" class="txtinput" id="fname">
      <b><font color="#FF0000" face="Arial" size="2">*<br>
      <br>
</font></b></td>
    <td width="5"></td>
</tr>
<tr>
<td height="19" valign="top">Last Name: </td>
    <td colspan="3" valign="top"><input type="text" name="lname" size="32" class="txtinput" id="lname">      <font color="#FF0000" face="Arial" size="2">*<br>
      <br>
    </font></td>
    <td></td>
</tr>
<tr>
<td height="19" valign="top">Title: </td>
    <td colspan="3" valign="top"><input type="text" name="title" size="32" class="txtinput" id="title">      
    <font color="#FF0000" face="Arial" size="2"><br>
      <br>
    </font></td>
    <td></td>
</tr>
<tr>
<td height="19" valign="top">Company Name: </td>
    <td colspan="3" valign="top"><input type="text" name="title2" size="32" class="txtinput" id="comp_name">
      <br>
      <br></td>
    <td></td>
</tr>
<tr>
<td height="19" valign="top">Email Address: </td>
    <td colspan="3" valign="top"><input type="text" name="email" size="32" class="txtinput" id="email">
<b><font color="#FF0000" face="Arial" size="2">*<br>
<br>
</font></b></td>
    <td></td>
</tr>
<tr>
<td height="19" valign="top">Telephone Number: </td>
    <td colspan="3" valign="top"><input type="text" name="phone1" size="5" class="txtinput" id="phone1" maxlength="3"> 
-  
<input type="text" name="phone2" size="5" class="txtinput" id="phone2" maxlength="3"> 
- 
<input type="text" name="phone3" size="5" class="txtinput" id="phone3" maxlength="4">
<input type="hidden" name="phone" size="5" class="txtinput" id="phone" >
<b><font color="#FF0000" face="Arial" size="2">*<br>
<br>
</font></b></td>
    <td></td>
</tr>
<tr>
<td height="19" valign="top">Best time to call: </td>
    <td colspan="3" valign="top">
Between
<select class="txtinput" id="Time1" name="Time1">
<option selected>8:00 AM</option>
<option>9:00 AM</option>
<option>10:00 AM</option>
<option>11:00 AM</option>
<option>12:00 PM</option>
<option>1:00 PM</option>
<option>2:00 PM</option>
<option>3:00 PM</option>
<option>4:00 PM</option>
<option>5:00 PM</option>
<option>6:00 PM</option>
</select> and 
<select class="txtinput" id="Time2" name="Time2">
  <option selected>8:00 AM</option>
  <option>9:00 AM</option>
  <option>10:00 AM</option>
  <option>11:00 AM</option>
  <option>12:00 PM</option>
  <option>1:00 PM</option>
  <option>2:00 PM</option>
  <option>3:00 PM</option>
  <option>4:00 PM</option>
  <option>5:00 PM</option>
  <option>6:00 PM</option>
</select> 
<select class="txtinput" id="Time3" name="Time3">
<option selected>Eastern</option>
<option>Central</option>
<option>Mountain</option>
<option>Pacific</option>
<option>Alaskan</option>
<option>Hawaiian</option>
</select>
<br>
<br>

</td>
    <td></td>
</tr>

<tr>
<td height="19" valign="top">Message: </td>
    <td colspan="3" valign="top"><textarea rows="4" name="msg" cols="40" id="msg" class="txtinput"></textarea>
      <br>
      <br></td>
    <td></td>
</tr>
<tr >
  <td  colspan=4><br>
    <input type="checkbox" name="C1" value="ON"> 
  I would like to receive more info 
  on project offerings and investor briefings<br>  <br>
   <input type="checkbox" name="C1" value="ON"> 
  I would like to receive monthly newsletters<br>  <br>
  <input type="checkbox" name="C2" value="ON"> 
  Please send me an information package by mail to the following address:<br>  <br>
  <td></td>
<tr>
<td height="19" valign="top"><div align="right">Address Line 1: <br>
</div></td>
    <td colspan="3" valign="top"><input type="text" name="comp_name" size="32" class="txtinput" id="comp_name">
      <br>
      <br>

     </td>
    <td></td>
</tr>
  <tr>
<td height="23" valign="top"><div align="right">
    <p>Address Line 2: </p>
    </div></td>
    <td colspan="3" valign="top"><input type="text" name="comp_name2" size="32" class="txtinput" id="comp_name2">
      <br>
      <br></td>
    <td></td>
  </tr>
  <tr>
    <td height="27" valign="top"><div align="right">
      City: 
    </div></td>
    <td colspan="3" valign="top"><input type="text" name="comp_name2" size="32" class="txtinput" id="comp_name2">     </td>
    <td></td>
  </tr>
  <tr>
    <td height="26" valign="top">   <div align="right">State: </div></td>
  <td width="80" valign="top">
    <select name="State" class="txtinput" id="State">

                    <option value="Alabama" selected="selected">AL</option>
                  <option value="Alaska">AK</option>
                  <option value="Arizona">AZ</option>
                  <option value="Arkansas">AR</option>
                  <option value="California">CA</option>
                  <option value="Colorado">CO</option>

                  <option value="Connecticut">CT</option>
                  <option value="Delaware">DE</option>
                  <option value="District of Columbia">DC</option>
                  <option value="Florida">FL</option>
                  <option value="Georgia">GA</option>
                  <option value="Hawaii">HI</option>

                  <option value="Idaho">ID</option>
                  <option value="Illinois">IL</option>
                  <option value="Indiana">IN</option>
                  <option value="Iowa">IA</option>
                  <option value="Kanasas">KS</option>
                  <option value="Kentucky">KY</option>

                  <option value="Louisiana">LA</option>
                  <option value="Maine">ME</option>
                  <option value="Maryland">MD</option>
                  <option value="Massachusetts">MA</option>
                  <option value="Michigan">MI</option>
                  <option value="Minnesota">MN</option>

                  <option value="Mississippi">MS</option>
                  <option value="Missouri">MO</option>
                  <option value="Montana">MT</option>
                  <option value="Nebraska">NE</option>
                  <option value="Nevada">NV</option>
                  <option value="New Hampshire">NH</option>

                  <option value="New Jersey">NJ</option>
                  <option value="New Mexico">NM</option>
                  <option value="New York">NY</option>
                  <option value="North Carolina">NC</option>
                  <option value="North Dakota">ND</option>
                  <option value="Ohio">OH</option>

                  <option value="Oklahoma">OK</option>
                  <option value="Oregon">OR</option>
                  <option value="Pennsylvania">PA</option>
                  <option value="Rhode Island">RI</option>
                  <option value="South Carolina">SC</option>
                  <option value="South Dakota">SD</option>

                  <option value="Tennessee">TN</option>
                  <option value="Texas">TX</option>
                  <option value="Utah">UT</option>
                  <option value="Vermont">VT</option>
                  <option value="Virginia">VA</option>
                  <option value="Washington">WA</option>

                  <option value="West Virginia">WV</option>
                  <option value="Wisconsin">WI</option>
                  <option value="Wyoming">WY</option>
                  </select>  </td>
    <td width="52" valign="top">Zipcode</td>
    <td width="203" valign="top"><input type="text" name="comp_name2" size="9" class="txtinput" id="comp_name2"></td>
    <td></td>
  </tr>
  <tr>
    <td height="64" colspan=4 valign="top">      <div align="center">
        <br>
        <br>
        <input type="submit" value="Submit" name="B1" class="txtinput">
     
        <input type="reset" value="Reset" name="B2" class="txtinput">
        <br>
      </div>
    <td></td>
  </tr>

<br>
  <br>
  
        
  <br>
  <input type="checkbox" name="C3" value="ON"> 
  I would like to receive monthly newletters <br>
<br>

</table>
</form>

Link to comment
https://forums.phpfreaks.com/topic/90549-checkbox-validation/
Share on other sites
rhodesa Newbie

rhodesa

Posted
Posted

Ok, first, WITH statements are for repetitively setting attributes of a particular object. Style attributes are a common use for this:

var ele = document.getElementById('foobar');
with(ele.style){
  color = '#FF0000';
  width = '200px';
  fontSize = '15pt';
}

So, there are several cases below that I removed the with...

 

Here is an updated copy of the JS (sorry I moved all your braces...it's personal preference and I'll miss an error otherwise...)

<script type="text/javascript">
function validate_required(field,alerttxt) {
  if (!field.value.length) {
    alert(alerttxt);
    field.focus();
    return false;
  } else
    return true;
}

//You don't use this, so i commented it out
//function validate_email(field,alerttxt)
//{
//with (field)
//{
//apos=value.indexOf("@");
//dotpos=value.lastIndexOf(".");
//if (apos<1||dotpos-apos<2) 
//  {alert(alerttxt);return false;}
//else {return true;}
//}
//}

function validate_form(thisform) {
  with (thisform) {
    if (!validate_required(fname,"First Name must be filled out!"))
      return false; 
    if (!validate_required(lname,"Last Name must be filled out!"))
      return false;
    if (!validate_required(title,"Title must be filled out!"))
      return false;
    if (!validate_required(title2,"Company must be filled out!"))
      return false;
    if (C1.checked && !validate_required(email,"email2 must be filled out!"))
      return false;
    if (!validate_required(phone1,"Phone Box 1 must be filled out!"))
      return false;
    if (!validate_required(phone2,"Phone Box 2 must be filled out!"))
      return false;
    if (!validate_required(phone3,"Phone Box 3 must be filled out!"))
      return false;
  }
  return true;
}
</script>

Link to comment
https://forums.phpfreaks.com/topic/90549-checkbox-validation/#findComment-464272
Share on other sites
phpSensei Advanced Member

phpSensei

Posted
  • Author
Posted

Here is the current code:

 

function validate_form(thisform)
{
with (thisform)
{
if (validate_required(fname,"First Name must be filled out!")==false)
  {fname.focus();return false;}
else if (validate_required(lname,"Last Name must be filled out!")==false)
  {lname.focus();return false;}
else if (validate_required(title,"Title must be filled out!")==false)
  {title.focus();return false;}
else if (validate_required(title2,"Company must be filled out!")==false)
  {title2.focus();return false;}  
else if (C1.checked && validate_required(email,"email2 must be filled out!"))
  {email.focus();return false;}  
  else if (validate_required(phone1,"Phone Box 1 must be filled out!")==false)
  {phone1.focus();return false;}
  else if (length_value(phone1,3,"Phone Box must be in this format: 000-0000-000")==false)
  {phone1.focus();return false;}

else if (validate_required(phone2,"Phone Box 2 must be filled out!")==false)
  {phone2.focus();return false;}  
   else if (validate_required(phone3,"Phone Box 3 must be filled out!")==false)
  {phone3.focus();return false;}  
  }
}

Link to comment
https://forums.phpfreaks.com/topic/90549-checkbox-validation/#findComment-464306
Share on other sites
rhodesa Newbie

rhodesa

Posted
Posted

Ok...couple of things...I removed this code from the end of the form because it looked like it didn't belong:

<br>
  <br>
  
        
  <br>
  <input type="checkbox" name="C3" value="ON"> 
  I would like to receive monthly newletters <br>
<br>

 

I also changed the names of the checkboxes, here is the entire code that i tested and it works:

<script type="text/javascript">
function validate_required(field,alerttxt)
{
if (!field.value.length)
  {alert(alerttxt);return false;}
return true;
}
function length_value(field,len,alerttxt)
{
if (field.value.length !== len)
  {alert(alerttxt);return false;}
return true;
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_required(fname,"First Name must be filled out!")==false)
  {fname.focus();return false;}
else if (validate_required(lname,"Last Name must be filled out!")==false)
  {lname.focus();return false;}
else if (validate_required(title,"Title must be filled out!")==false)
  {title.focus();return false;}
else if (validate_required(title2,"Company must be filled out!")==false)
  {title2.focus();return false;}  
else if (notify_info.checked || notify_news.checked)
{
if( validate_required(email,"email2 must be filled out!")==false)
  {email.focus();return false;}
}  
  else if (validate_required(phone1,"Phone Box 1 must be filled out!")==false)
  {phone1.focus();return false;}
  else if (length_value(phone1,3,"Phone Box must be in this format: 000-0000-000")==false)
  {phone1.focus();return false;}

else if (validate_required(phone2,"Phone Box 2 must be filled out!")==false)
  {phone2.focus();return false;}  
   else if (validate_required(phone3,"Phone Box 3 must be filled out!")==false)
  {phone3.focus();return false;}  
  }
  alert('done');
  return false;
}
</script>
<form action="mail.php" onsubmit="return validate_form(this)" name="frm" method="post">
<br>
<table width="469" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
<tr>
  <td width="129" height="19" valign="top">First Name: </td>
    <td colspan="3" valign="top"><input type="text" name="fname" size="32" class="txtinput" id="fname">
      <b><font color="#FF0000" face="Arial" size="2">*<br>
      <br>
</font></b></td>
    <td width="5"></td>
</tr>
<tr>
  <td height="19" valign="top">Last Name: </td>
    <td colspan="3" valign="top"><input type="text" name="lname" size="32" class="txtinput" id="lname">      <font color="#FF0000" face="Arial" size="2">*<br>
      <br>
    </font></td>
    <td></td>
</tr>
<tr>
  <td height="19" valign="top">Title: </td>
    <td colspan="3" valign="top"><input type="text" name="title" size="32" class="txtinput" id="title">      
    <font color="#FF0000" face="Arial" size="2"><br>
      <br>
    </font></td>
    <td></td>
</tr>
<tr>
  <td height="19" valign="top">Company Name: </td>
    <td colspan="3" valign="top"><input type="text" name="title2" size="32" class="txtinput" id="comp_name">
      <br>
      <br></td>
    <td></td>
</tr>
<tr>
  <td height="19" valign="top">Email Address: </td>
    <td colspan="3" valign="top"><input type="text" name="email" size="32" class="txtinput" id="email">
<b><font color="#FF0000" face="Arial" size="2">*<br>
<br>
</font></b></td>
    <td></td>
</tr>
<tr>
  <td height="19" valign="top">Telephone Number: </td>
    <td colspan="3" valign="top"><input type="text" name="phone1" size="5" class="txtinput" id="phone1" maxlength="3"> 
-  
<input type="text" name="phone2" size="5" class="txtinput" id="phone2" maxlength="3"> 
- 
<input type="text" name="phone3" size="5" class="txtinput" id="phone3" maxlength="4">
<input type="hidden" name="phone" size="5" class="txtinput" id="phone" >
<b><font color="#FF0000" face="Arial" size="2">*<br>
<br>
</font></b></td>
    <td></td>
</tr>
<tr>
  <td height="19" valign="top">Best time to call: </td>
    <td colspan="3" valign="top">
  Between
<select class="txtinput" id="Time1" name="Time1">
<option selected>8:00 AM</option>
<option>9:00 AM</option>
<option>10:00 AM</option>
<option>11:00 AM</option>
<option>12:00 PM</option>
<option>1:00 PM</option>
<option>2:00 PM</option>
<option>3:00 PM</option>
<option>4:00 PM</option>
<option>5:00 PM</option>
<option>6:00 PM</option>
</select> and 
<select class="txtinput" id="Time2" name="Time2">
  <option selected>8:00 AM</option>
  <option>9:00 AM</option>
  <option>10:00 AM</option>
  <option>11:00 AM</option>
  <option>12:00 PM</option>
  <option>1:00 PM</option>
  <option>2:00 PM</option>
  <option>3:00 PM</option>
  <option>4:00 PM</option>
  <option>5:00 PM</option>
  <option>6:00 PM</option>
</select> 
<select class="txtinput" id="Time3" name="Time3">
<option selected>Eastern</option>
<option>Central</option>
<option>Mountain</option>
<option>Pacific</option>
<option>Alaskan</option>
<option>Hawaiian</option>
</select>
<br>
<br>

  </td>
    <td></td>
</tr>

<tr>
  <td height="19" valign="top">Message: </td>
    <td colspan="3" valign="top"><textarea rows="4" name="msg" cols="40" id="msg" class="txtinput"></textarea>
      <br>
      <br></td>
    <td></td>
</tr>
<tr >
  <td  colspan=4><br>
    <input type="checkbox" name="notify_info" value="ON"> 
  I would like to receive more info 
  on project offerings and investor briefings<br>  <br>
   <input type="checkbox" name="notify_news" value="ON"> 
  I would like to receive monthly newsletters<br>  <br>
  <input type="checkbox" name="notify_package" value="ON"> 
  Please send me an information package by mail to the following address:<br>  <br>
  <td></td>
<tr>
  <td height="19" valign="top"><div align="right">Address Line 1: <br>
  </div></td>
    <td colspan="3" valign="top"><input type="text" name="comp_name" size="32" class="txtinput" id="comp_name">
      <br>
      <br>
  
     </td>
    <td></td>
</tr>
  <tr>
  <td height="23" valign="top"><div align="right">
      <p>Address Line 2: </p>
      </div></td>
    <td colspan="3" valign="top"><input type="text" name="comp_name2" size="32" class="txtinput" id="comp_name2">
      <br>
      <br></td>
    <td></td>
  </tr>
  <tr>
    <td height="27" valign="top"><div align="right">
        City: 
      </div></td>
    <td colspan="3" valign="top"><input type="text" name="comp_name2" size="32" class="txtinput" id="comp_name2">     </td>
    <td></td>
  </tr>
  <tr>
    <td height="26" valign="top">   <div align="right">State: </div></td>
  <td width="80" valign="top">
    <select name="State" class="txtinput" id="State">

                    <option value="Alabama" selected="selected">AL</option>
                  <option value="Alaska">AK</option>
                  <option value="Arizona">AZ</option>
                  <option value="Arkansas">AR</option>
                  <option value="California">CA</option>
                  <option value="Colorado">CO</option>

                  <option value="Connecticut">CT</option>
                  <option value="Delaware">DE</option>
                  <option value="District of Columbia">DC</option>
                  <option value="Florida">FL</option>
                  <option value="Georgia">GA</option>
                  <option value="Hawaii">HI</option>

                  <option value="Idaho">ID</option>
                  <option value="Illinois">IL</option>
                  <option value="Indiana">IN</option>
                  <option value="Iowa">IA</option>
                  <option value="Kanasas">KS</option>
                  <option value="Kentucky">KY</option>

                  <option value="Louisiana">LA</option>
                  <option value="Maine">ME</option>
                  <option value="Maryland">MD</option>
                  <option value="Massachusetts">MA</option>
                  <option value="Michigan">MI</option>
                  <option value="Minnesota">MN</option>

                  <option value="Mississippi">MS</option>
                  <option value="Missouri">MO</option>
                  <option value="Montana">MT</option>
                  <option value="Nebraska">NE</option>
                  <option value="Nevada">NV</option>
                  <option value="New Hampshire">NH</option>

                  <option value="New Jersey">NJ</option>
                  <option value="New Mexico">NM</option>
                  <option value="New York">NY</option>
                  <option value="North Carolina">NC</option>
                  <option value="North Dakota">ND</option>
                  <option value="Ohio">OH</option>

                  <option value="Oklahoma">OK</option>
                  <option value="Oregon">OR</option>
                  <option value="Pennsylvania">PA</option>
                  <option value="Rhode Island">RI</option>
                  <option value="South Carolina">SC</option>
                  <option value="South Dakota">SD</option>

                  <option value="Tennessee">TN</option>
                  <option value="Texas">TX</option>
                  <option value="Utah">UT</option>
                  <option value="Vermont">VT</option>
                  <option value="Virginia">VA</option>
                  <option value="Washington">WA</option>

                  <option value="West Virginia">WV</option>
                  <option value="Wisconsin">WI</option>
                  <option value="Wyoming">WY</option>
                  </select>  </td>
    <td width="52" valign="top">Zipcode</td>
    <td width="203" valign="top"><input type="text" name="comp_name2" size="9" class="txtinput" id="comp_name2"></td>
    <td></td>
  </tr>
  <tr>
    <td height="64" colspan=4 valign="top">      <div align="center">
        <br>
        <br>
        <input type="submit" value="Submit" name="B1" class="txtinput">
     
        <input type="reset" value="Reset" name="B2" class="txtinput">
        <br>
      </div>
    <td></td>
  </tr>

</table>
</form>

Link to comment
https://forums.phpfreaks.com/topic/90549-checkbox-validation/#findComment-464384
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.