...

View Full Version : JavaScript validation form code



madiedoj
06-14-2010, 06:04 PM
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/dynamicindex16/requiredcheck.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).



<script type="text/javascript">
if (Function+Design<1 or == 400 or == 800)
{document.write("Please select both a Function and Design Type");}
</script>

Vsalrhal
06-14-2010, 09:01 PM
Good Afternoon, I believe I know what you're looking for.

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



<?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 :


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


<?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.

madiedoj
06-14-2010, 11:05 PM
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.

Old Pedant
06-14-2010, 11:46 PM
Show your <form> code, esp. the two sets of radio buttons.

No, your existing JS will do nothing at all.

Skychan
06-15-2010, 04:08 AM
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

madiedoj
06-16-2010, 06:47 AM
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.


<!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>

Old Pedant
06-16-2010, 07:33 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum