Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-14-2010, 06:04 PM   PM User | #1
madiedoj
New to the CF scene

 
Join Date: Jun 2010
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
madiedoj is an unknown quantity at this point
Post JavaScript validation form code

I need help with a JavaScript form validation code. I am using the form validation code that is found on this page: http://www.dynamicdrive.com/dynamici...uiredcheck.htm

The code works fine for me, but what I'm trying to do is add an additional condition to it. Currently, I just have the code set up to check if the user has enter their name, email, and phone number. But I also need it to validate something else only if a specific condition is true. On my form I have 2 different sets of Radio lists. One is called Function and the other radio list is called Design. If the user selects an option on one of the 2 lists, then it will be required for the user to also select an option from the 2nd list. The user CAN decide not to select anything from either radio list, but can not select from one list and NOT from the other.

This is the If statement that I created (don't know if its correct or how to insert it to my current validation code).

Code:
<script type="text/javascript">
if (Function+Design<1 or == 400 or == 800)
  {document.write("Please select both a Function and Design Type");}
</script>
madiedoj is offline   Reply With Quote
Old 06-14-2010, 09:01 PM   PM User | #2
Vsalrhal
New Coder

 
Join Date: Jun 2010
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Vsalrhal is an unknown quantity at this point
Good Afternoon, I believe I know what you're looking for.

in your myforms.php file you'll want this :

Code:
<?php 
$variable = check_input($_POST['variable'], "Alert Message Here");
$variable2 = check_input($_POST['variable2'], "Alert Message Here");
$variable3 = check_input($_POST['variable3'], "Alert Message Here");
$variable4 = check_input($_POST['variable4'], "Alert Message Here");
$variable5 = check_input($_POST['variable5'], "Alert Message Here");
?>
<html>
<head>
</head
etc....
then in your 'body', you'll want to display the information you're attempting to validate. so you'll need to place the following :
Code:
Variable 1: <?php echo $_POST['Variable']; ?>
Variable 2: <?php echo $_POST['variable2']; ?>
Variable 3: <?php echo $_POST['variable3']; ?>
Variable 4: <?php echo $_POST['variable4']; ?>
Variable 5: <?php echo $_POST['variable5']; ?>
After you've done this, it's always my practice to go ahead and trim any unnecessary parsed information.

BELOW the </html> (yes below) place the following
Code:
<?php
function check_input($data, $problem='')
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
	if ($problem && strlen($data) == 0)
	{
		die($problem);
	}
	return $data;
}

function show_error($myError)
{
?>
	<html>
    <body>
    
    <b>Please Correct the following Error(s):</b><br />
    <?php echo $myError; ?>
    
    </body>
    </html>
<?php
exit();
}
?>
Best of luck.
Vsalrhal is offline   Reply With Quote
Old 06-14-2010, 11:05 PM   PM User | #3
madiedoj
New to the CF scene

 
Join Date: Jun 2010
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
madiedoj is an unknown quantity at this point
I need it in JavaScript, not PHP. My actual form page is in HTML, so I'm using JavaScript to validate fields on the form. After the data has pass the validation process it does then go to a PHP file. I do not need help with my PHP file, that works fine for me. What I need help with is the JavaScript code that I have on my HTML file where my form is located. Please go to the URL that I placed on my original post, so you can see the JavaScript code that I am working with.
madiedoj is offline   Reply With Quote
Old 06-14-2010, 11:46 PM   PM User | #4
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,227
Thanks: 59
Thanked 3,996 Times in 3,965 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
Show your <form> code, esp. the two sets of radio buttons.

No, your existing JS will do nothing at all.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is online now   Reply With Quote
Old 06-15-2010, 04:08 AM   PM User | #5
Skychan
New Coder

 
Join Date: Feb 2010
Posts: 44
Thanks: 0
Thanked 3 Times in 3 Posts
Skychan is an unknown quantity at this point
Code:
var functionList = document.getElementById('myform').Function;;
var designList = document.getElementById('myform').Design;
var functionChecked = false;
var designChecked = false;

for(var i = 0; i < functionList.length; i++)
{
  if(functionList[i].checked){
    functionChecked = true;
    break;
  }
}
for(i = 0; i < designList.length; i++)
{
  if(designList[i].checked){
    designChecked = true;
    break;
  }
}

//if at least one was checked and one was not checked (equivalent to ONLY one group was checked)
if( (functionChecked || designChecked) && (!functionChecked || !designChecked) )
{
  alert('You need to choose something from the ' + (!functionChecked? 'Function' : 'Design') + ' radio group.');
}
Hopefully you can figure out where this code will go in order to do your validation... and obviously change the alert() to your preferred method of messaging the user.

cheers
Skychan is offline   Reply With Quote
Old 06-16-2010, 06:47 AM   PM User | #6
madiedoj
New to the CF scene

 
Join Date: Jun 2010
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
madiedoj is an unknown quantity at this point
Here is my current code and the colored section is my current form validation code. I need to know how to change my current validation code to include the Radio lists validation option.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="JavaScript">
<!--
//-->

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
  
}
//-->
</script>

</head>
<body>
<br><br><br>
<form action="quoteform.php" method="post" name="quote" onSubmit="MM_validateForm('Name','','R','Email','','RisEmail','Phone','','R');return document.MM_returnValue">
        <table width="676" border="0" cellpadding="0" cellspacing="0">
        <tr> 
            <td width="120"><img src="images/xfmail.png" width="100" height="100"></td>
            <td rowspan="2" valign="middle">Please enter your name and contact 
              information below. </td>
        </tr>
        
		<tr>
            <td height="20" colspan="2"></td>
			</tr>
		
		<tr>
            <td valign="top"><br>
		<label><strong>Name:</strong></label>
            </td>
			  
			  
            <td valign="bottom">
<input name="Name" type="text" size="40">
            </td>
			  
			  </tr>
        
	
		
		<tr>
            <td valign="top"><br>
		
		
	
		<label><strong>Email:</strong></label>
            </td>
		
		    <td valign="bottom"> 
              <input name="Email" type="text" size="40">
            </td>
		
		
		</tr>
		
	<tr>
            <td valign="top"><br>
		<label><strong>Phone:</strong></label>
            </td>
			  
			  
            <td valign="bottom">
<input name="Phone" type="text" size="40">
            </td>
			  
			  </tr>
			  
			  
			  <tr>
            <td valign="top"><br>
		<label><strong>Website:</strong></label>
            </td>
			  
			  
            <td valign="bottom">
<input name="Website" type="text" value="http://" size="40">
            </td>
			  
			  </tr>
			  
			<tr>
            <td height="20" colspan="2"></td>
			</tr> 
			
			<tr> 
          <td width="676" height="1" background="images/1_li.gif" colspan="2"></td>
        </tr> 
			  
		<tr> 
            <td width="120"><img src="images/WindowBlinds.png" width="100" height="100"></td>
            <td rowspan="2" valign="middle">In the section below please enter 
              the design and functionality details on the development of your 
              site. </td>
        </tr>	  
			<tr>
            <td height="20" colspan="2"></td>
			</tr>  
			  
			<tr><td colspan="2">
			
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr><td>
			
			<label><strong>Functionality of Site:</strong></label>
			
			</td>
			
			<td>
			
			<label><strong>Design Type:</strong></label>
			
			</td>
			
			</tr>  
			<tr>
            <td height="20"></td> <td height="20"></td>
			</tr>   
			  
		<tr>
                  <td valign="top"> 
                    <p>
                <label>
                <input type="radio" name="Function" value="2000">
                Online Store</label>
                <br>
                      <br>
                <label>
                <input type="radio" name="Function" value="1000">
                Photo Gallery</label>
                <br><br>
				<label>
                <input type="radio" name="Function" value="1000">
                Blog</label>
                <br><br>
				<label>
                <input type="radio" name="Function" value="500">
                Informational</label>
                <br><br>
				<label>
                <input type="radio" name="Function" value="1">
                Other</label>
                <br><br>
              </p> </td>
			  
			  
			  
			      <td valign="top"> 
                    <p>
                <label>
                <input type="radio" name="Design" value="400">
                      Basic Site Design</label>
                <br><br>
                <label>
                <input type="radio" name="Design" value="800">
                Advanced Site Design</label>
                <br><br>
              </p> </td>
			  
			  
          </tr>	  
</table>

			
			
			
			
			 </td>
			  
			  
          </tr>	  
			  
		<tr>
            <td height="20" colspan="2"></td>
			</tr> 	  
			  
			 
			 <tr> 
          <td width="676" height="1" background="images/1_li.gif" colspan="2"></td>
        </tr> 
			 
			  
		<tr> 
            <td width="120" align="center"><img src="images/share.png" width="100" height="100"></td>
            <td rowspan="2" valign="middle">In the section below please select any additional services that you would like to purchase. </td>
        </tr>	  
			<tr>
            <td height="20" colspan="2"></td>
			</tr>  	  
		
		<tr><td>
		
		<label><strong>Services:</strong></label>
		
		</td>
		
		<td>
			  
			  
			  <label>
              <input name="SEO" type="radio" value="200">
              Basic Search Engine Optimization</label>
			  
			  
			  <label>
              <input name="SEO" type="radio" value="400">
              Advanced Search Engine Optimization</label>
			  
			  <label>
              <input name="LogoDesign" type="checkbox" value="300">
              Logo Design</label>
			  
			   <label>
              <input name="WebsiteMaintenance" type="checkbox" value="1">
              Website Maintenance</label>
			  
			  <label>
              <input name="Other" type="checkbox" value="1">
              Other</label>
			  
			  </td>
		
		
		</tr>
		
		
		<tr>
            <td height="20" colspan="2"></td>
			</tr>
			
			
			<tr> 
          <td width="676" height="1" background="images/1_li.gif" colspan="2"></td>
        </tr> 
			
			<tr>
            <td height="20" colspan="2"></td>
			</tr>
		
		<tr> 
            <td width="120"><img src="images/webhosting.jpg" width="100" height="100"></td>
            <td rowspan="2" valign="middle">Please enter your web hosting provider information here. </td>
        </tr>
        
		<tr>
            <td height="20" colspan="2"></td>
			</tr>
		
		<tr><td colspan="2">
		
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
            <td valign="top"><br>
		<label><strong>Web Hosting Provider:</strong></label>
            </td>
			  
			  
            <td valign="bottom">
<input name="WebHostingProvider" type="text" size="40">
            </td>
			  
			  </tr>
        
	
		
		<tr>
            <td valign="top"><br>
		
		
	
		<label><strong>Web Hosting Plan:</strong></label>
            </td>
		
		    <td valign="bottom"> 
              <input name="WebHostingPlan" type="text" size="40">
            </td>
		
		
		</tr>
		
	<tr>
            <td valign="top"><br>
		<label><strong>Phone:</strong></label>
            </td>
			  
			  
            <td valign="bottom">
<input name="WebHostingPhone" type="text" size="40">
            </td>
			  
			  </tr>
			  
			  
			  <tr>
            <td valign="top"><br>
		<label><strong>Website:</strong></label>
            </td>
			  
			  
            <td valign="bottom">
<input name="WebHostingWebsite" type="text" value="http://" size="40">
            </td>
			  
			  </tr>
</table>

		
		
		
		</td></tr>
		
		
		
		
			<tr>
            <td height="20" colspan="2"></td>
			</tr>
		
		
		<tr> 
          <td width="676" height="1" background="images/1_li.gif" colspan="2"></td>
        </tr> 
		
		<tr>
            <td height="20" colspan="2"></td>
			</tr>
		
		
		<tr> 
            <td width="120"><img src="images/Notepad.png" width="100" height="100"></td>
            <td rowspan="2" valign="middle">Please enter any additional information here. </td>
        </tr>
        
		<tr>
            <td height="20" colspan="2"></td>
			</tr>
		
		
		<tr><td colspan="2">
		
		
		<label><strong>Additional Information:</strong></label>
		
		</td></tr>
		
		
		<tr><td colspan="2" height="20"></td></tr>
		
		
		
		<tr><td colspan="2">
		
		
		<textarea name="AdditionalInformation" cols="70" rows="10"></textarea>
		
		</td></tr>
		
		
		
		<tr>
            <td height="20" colspan="2"></td>
			</tr>
		
		
		<tr> 
          <td width="676" height="1" background="images/1_li.gif" colspan="2"></td>
        </tr> 
		
		<tr>
            <td height="20" colspan="2"></td>
			</tr>
		
		
		<tr> 
            <td width="120"><img src="images/verifyandsend.png" width="100" height="100"></td>
            <td rowspan="2" valign="middle">Please enter the verification code 
              and click on the submit button. </td>
        </tr>
        
		<tr>
            <td height="20" colspan="2"></td>
			</tr>
		
		<tr><td colspan="2">
			
			<input name="Submit" type="submit" id="Submit" value="Submit">
              <input type="reset" name="Reset" value="Reset"> </td>
			
			
			
			</tr>  
			
		
		
      </table></form>
<br><br>
 </body>
</html>
madiedoj is offline   Reply With Quote
Old 06-16-2010, 07:33 PM   PM User | #7
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,227
Thanks: 59
Thanked 3,996 Times in 3,965 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
Do yourself a *BIG* favor and stop using DumbWhacker for doing validation. DoofusWhomper (oh, okay, DreamWeaver) produces perhaps the worst (and most ancient!) JavaScript code of any tool out there.

DW's email validation code is so weak that it accepts an email address of (for example) "x@y" or even " @ ". And for ordinary text fields, it accepts even a single space as valid.

It's just plain worthless validation.

Almost any validator you find online will be better than that. And the good ones can be really quite good.

SkyChan's basic code for validating radio buttons and/or requiring at least one of a group of checkboxes to be checked is okay, but it really ought to be converted into a function. And should be modified to handle the case of single checkboxes, too.

I could rewrite the entire validation for you, but I think you should do some basic research first. You might well find a *good* validator that will do all you want.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is online now   Reply With Quote
Reply

Bookmarks

Tags
form, javascript, required, validation, validator

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:18 AM.


Advertisement
Log in to turn off these ads.