validating checkbox onsubmit

Question

servis 0 Junior Poster in Training

15 Years Ago

i want to validate whether the checkbox is empty or not, if it is empty, the alert box show message, but the following code is not working...

function validate(form) {
with(form) {
   if(agreement.value.checked==false) 
  {
  alert("Please commit the agreement to continue.");
  agreement.focus();
  return false;
  }
}

Secondly, i want user must enter one any filed from two fields, for this i am using the following code, but it also not working,

function validate(form) {
with(form) {
   if(conPerP1.value=="" || conPerP2.value=="" ) 
  {
  alert("Please enter your telephone or cell no. to continue.");
  conPerP1.focus(); 
  return false;
  }
}

please help me in this regard, i tried a lot to search through GOOGLE but in vain..

Thanks in advance.....

javascript

4 Contributors
10 Replies
289 Views
4 Days Discussion Span
Latest Post 15 Years Ago Latest Post by servis

nav33n 472 Purple hazed!

15 Years Ago

What is with(form) ? Are you calling a function called with which is declared somewhere else ?
Also, agreement.value.checked wouldn't work because,

The syntax is not correct
It will say agreement is not defined!

Try this.

function validate(form) {
  if(!(form.agreement.checked)) {
	  alert("Please commit the agreement to continue.");
	  form.agreement.focus();
	  return false;
  } else return true;
}

Same thing for your second question. conPerP1.value should be form.conPerP1.value .

nav33n 472 Purple hazed!

15 Years Ago

You forgot to remove with(form) :)

Edit: For testing purpose, you can use error console in mozilla firefox to know where the error is.

nav33n 472 Purple hazed!

15 Years Ago

Hmm.. It has to! Did you use error console to see the error message ? If you can post your complete code, we could see where you are going wrong.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

servis 0 Junior Poster in Training · Answer 1 · 2009-04-17T14:16:05+00:00

Thank you nav33 for guiding... 1st solution is very much working,
but 2nd one is nor working, the code is as follow,

function validate(form) {
with(form) {
if(form.conPerP1.value=="" || form.conPerP2.value=="") 
	{
		alert("Please enter your telephone or cell no. to continue.");
		return false;
		}
}

servis 0 Junior Poster in Training · Answer 2 · 2009-04-17T18:30:37+00:00

the code did not work by removing with(form). however thank you very much for helping me...

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-04-17T23:35:21+00:00

Hope this will help...

<html>
<head>
<title>DEMO</title>
<script type="text/javascript">
<!--
function validate( form ) {
   try {
      with( form ) {  
         if ( !agreement.checked ) {
         alert ("Please commit the agreement to continue.");
         agreement.focus();
         return false;
         } 
         if (( conPerP1.value == "" ) || ( conPerP2.value == "" )) {
         alert("Please enter your telephone or cell no. to continue.");
         conPerP1.focus();
         return false;
         } 
       } return true;
     }  
     catch( e ) {  
   if ( !form.agreement.checked ) {
     alert ("Please commit the agreement to continue.");
     form.agreement.focus();
     return false;
     }
   if (( form.conPerP1.value == "" ) || ( form.conPerP2.value == "" )) {
     alert("Please enter your telephone or cell no. to continue.");
     form.conPerP1.focus();
      return false;
    } return true;  
  }
} 
// -->
</script>
</head>
<body>
<form id="form1" action="#" onsubmit="return validate( this );">
<div>
<label for="agreement"><input type="checkbox" id="agreement" name="agreement" value="" /> I agree</label><br />
<label for="conPerP1">Tel: <input type="text" id="conPerP1" name="conPerP1" size="10" value="" /></label><br />
<label for="conPerP2">Mobile: <input type="text" id="conPerP2" name="conPerP2" size="10" value="" /></label><br />
<input type="submit" id="sbm" name="sbm"  value="submit" />
</div>
</form>
</body>
</html>

wblakenc 0 Newbie Poster · Answer 4 · 2009-04-18T06:42:28+00:00

You know I spent about a half hour (maybe longer) trying to figure out what you were doing wrong. I cut your code down to the min and just had the if statement that checked to see if one OR the other phone number was blank. I couldn't figure it out until it dawned on me. You are using an OR when you should be using an AND!!!! It is not if one or the other is bank (as written in the Alert message), it is one and the other is blank (i.e. they are both blank) that you want it to error out.

On a side note, you really do not need as much code as you have to do this check. I am not sure why you have the Try/Catch statements in the validation.

The following is sufficient (at least when looking at the code you posted).

<html>
<head>
<title>DEMO</title>
<script type="text/javascript">
<!--
function validate( form ) {
   
   if ( !form.agreement.checked ) {
     alert ("Please commit the agreement to continue.");
     form.agreement.focus();
     return false;
     }
   if (( form.conPerP1.value == "" ) && ( form.conPerP2.value == "" )) {
     alert("Please enter your telephone or cell no. to continue.");
     form.conPerP1.focus();
      return false;
    } return true;  
  }
 
// -->
</script>
</head>
<body>
<form id="form1" action="#" onsubmit="return validate( this );">
<div>
<label for="agreement"><input type="checkbox" id="agreement" name="agreement" value="" /> I agree</label><br />
<label for="conPerP1">Tel: <input type="text" id="conPerP1" name="conPerP1" size="10" value="" /></label><br />
<label for="conPerP2">Mobile: <input type="text" id="conPerP2" name="conPerP2" size="10" value="" /></label><br />
<input type="submit" id="sbm" name="sbm"  value="submit" />
</div>
</form>
</body>
</html>

servis 0 Junior Poster in Training · Answer 5 · 2009-04-20T09:44:33+00:00

thank you very much for your very good solutions, i tried them all but Unfortunately still no success, my complete code sample is as follow,

<html>
<head>
<title>DEMO</title>

<script type="text/javascript"><!--

function validate(form) {
with(form) {
	
if (( form.conPerP1.value == "" ) || ( form.conPerP2.value == "" ))
	 {
     alert("Please enter your telephone or cell no. to continue.");
     form.conPerP1.focus();
      return false;
      } return true; 
		
	if(!(form.agreement.checked)) {
	  alert("Please commit the agreement to continue.");
	  form.agreement.focus();
	  return false;
	    }else return true; 
	  }

 return true;
}
// --></script></head>

<?php
if(isset($_POST['put'])){
echo $_POST['conPerP1'];
echo $_POST['conPerP2'];
}
 ?>
<form method="POST" action="" onsubmit="return validate(this)">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" height="160">
<tr>
    <td width="25%" height="32" align="right"><font face="Calibri">Contact Person Phone No. 1:</font></td>
    <td width="75%" height="32">&nbsp;
	<input type="text" name="conPerP1" size="20"></td>
  </tr>

  <tr>
    <td width="25%" height="20" align="right"><font face="Calibri">Contact Person Phone No. 2:</font></td>
    <td width="75%" height="30">&nbsp;
	<input type="text" name="conPerP2" size="20"></td>
  </tr>

  <tr>
    <td height="30" colspan="2" align="left"><font face="Calibri">
    <input type="checkbox" name="agreement" value="checkbox"> I agree all the terms & conditions of this website </font></td>
  </tr>

 </table>
  <p align="center">
	<input name="put" type="submit" value="Submit" >
  </p>
</form>
</body>
</html>

secondly, agreement check validation is running fine on Safari but does not working same on IE.

Thnak you for your responses...

wblakenc 0 Newbie Poster · Answer 6 · 2009-04-20T19:54:40+00:00

You had a few problems with your code. First you still had the OR statement in the javascript area that checked to see if someone had put either their telephone or cellphone number. This should be an AND. Why? Simple. You are checking to see if the first and second box are empty meaning the user did not put in one or the other.

The second problem you had is the check that validated the phone number boxes returned true if the validation passed. The problem with this is you never let the javascript get to the validation for the check box. You only need one return, and that return should be after the check box.

The last problem you had was some extra parenthesizes around the if statement that checked if the check box was checked or not. Also I found that the form did not have an id which was causing some issues in Firefox. I have added the id named 'form1'. I also removed the "with(form)" because I do not see any reason why you need it.

Below you will find your code with my edits. Let me know if you have any questions.

<html>
<head>
<title>DEMO</title>

<script type="text/javascript"><!--

function validate(form) {

	
if (( form.conPerP1.value == "" ) && ( form.conPerP2.value == "" ))
	 {
     alert("Please enter your telephone or cell no. to continue.");
     form.conPerP1.focus();
      return false;
      } 
		
	if(!form.agreement.checked) {
	  alert("Please commit the agreement to continue.");
	  form.agreement.focus();
	  return false;
	    } return true; 
	  }


// --></script></head>

<?php
if(isset($_POST['put'])){
echo $_POST['conPerP1'];
echo $_POST['conPerP2'];
}
 ?>
<form method="POST" action="" id="form1" onsubmit="return validate(this)">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" height="160">
<tr>
    <td width="25%" height="32" align="right"><font face="Calibri">Contact Person Phone No. 1:</font></td>
    <td width="75%" height="32">&nbsp;
	<input type="text" name="conPerP1" size="20"></td>
  </tr>

  <tr>
    <td width="25%" height="20" align="right"><font face="Calibri">Contact Person Phone No. 2:</font></td>
    <td width="75%" height="30">&nbsp;
	<input type="text" name="conPerP2" size="20"></td>
  </tr>

  <tr>
    <td height="30" colspan="2" align="left"><font face="Calibri">
    <input type="checkbox" name="agreement" value="checkbox"> I agree all the terms & conditions of this website </font></td>
  </tr>

 </table>
  <p align="center">
	<input name="put" type="submit" value="Submit" >
  </p>
</form>
</body>
</html>

servis 0 Junior Poster in Training · Answer 7 · 2009-04-21T08:37:33+00:00

Thank you wblakenc, now the code is working very much fine on IE7, Safari and Fire Fox.

Thank you very much once again.