validiting form data with php and javascript

marf

02-15-2006, 07:57 PM

OK basically I have a form, and when I submit, i want php to check to see if it has all the values, and if something is incorrect, i want it to change the style of the table around the input field so the user knows that they must correct it.

Here is a simple version of the basic concept

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<?php
if($_POST['action'] == 'submitted' && $_POST['name'] == ''){//name is blank
echo "<script type=\"text/javascript\">document.getElementById('tname').style.border = '2px solid #FF0000'</script>";
?>

<form action="form.php" method="post" name="testing">
<table width="320" border="0" cellpadding="4" cellspacing="0" align="center">
<tr>
<td>Name: </td>
<td id="tname"><input name="name" type="text" size="18" maxlength="50" /></td>
</tr>
<tr>
<td colspan="2"><input type="hidden" name="action" value="submitted" /><input type="submit" value="Submit" /></td>
</table>
</form>
</body>
</html>

This is a dummied down version. Basically if they forget to fill in their name, it checks and then outlines the box. I guess some people might reply back and say "Why arne't you checking to see if(document.test.name.value == '') basically get rid of PHP all together. Well im doing it this way. If you have a more efficient way using javascript im up for suggestions. Also is their an easy way to 'share' or pass data between javascript easily? The only way i can think of at this moment is to have a <input type="hidden" value="information> then have javascript read that, or vice versa. I can't think of another way.

Thanks for your responses in advance.

Mike

_Aerospace_Eng_

02-15-2006, 08:42 PM

I would actually use both clientside and serverside validation. Javascript can always be disabled. Try it like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css">
<?php
$output = "";
if(isset($_POST['submit']) && $_POST['submit'] == 'Submit') //if submitted
{
$name = $_POST['name'];
if(empty($name)) //if name is blank
{
echo '<style type="text/css">#tname { border:2px solid #F00; }</style>';
$output = '<tr><td colspan="2">You need to enter your name.</td></tr>';
}
else {
$output = '<tr><td colspan="2">There were no errors.</td></tr>';
}
}
?>
<script type="text/javascript">
function isValid(form)
{
if(form.name.value == '')
{
document.getElementById('tname').style.border = '2px solid #F00';
alert("You need to enter your name.");
form.name.focus();
return false;
}
}
</script>
</head>
<body>
<form action="<?php echo $_SERVER['SCRIPT_NAME']?>" method="post" onsubmit="return isValid(this)">
<table width="320" border="0" cellpadding="4" cellspacing="0" align="center">
<?php
if(!empty($output))
{
echo $output;
}
?>
<tr>
<td>Name: </td>
<td id="tname"><input name="name" type="text" size="18" maxlength="50" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

marf

02-16-2006, 01:41 PM

that way works great. Basically i am checking in Javascript for proper form validation. Is there any way to check if a file has been uploaded in javascript? Or can I check that in PHP and then send a boolean to javascript telling it whether a file was selected/uploaded or not?

_Aerospace_Eng_

02-17-2006, 03:45 AM

Check to see if there is a value in the file input box the same way you check for name.