Hi Langsor,
Your example has worked wonderfully. Now, would you be able to help me make a few fields required? I have tried several different ways, all with varying issues in them that did not make them work the right way.
Thanks very much!
Glad it worked.
The fun thing about making fields required is that you probably want to check them on the client (
web browser) before submitting the form --
it's easier for the visitor to change fields before it's submitted -- and this requires JavaScript; but you also want to check them on the server (
PHP side) since you can't rely on JavaScript since it can be disabled or circumvented too easily. But then again, most people don't do this.
In JavaScript you walk through the form fields and test the ones that are required. If they don't pass the test, you alert the visitor in some manner.
In PHP you do the same thing, and then re-publish the form with the failed fields highlighted in some manner, while keeping the other fields filled in from the first submission.
There are, of course, multiple ways to accomplish all of the above tasks. Here is one simplified way you might do this with both JavaScript and PHP ... it could be built up to be more comprehensive and use better checking tests, but as an example ...
<?php
if ( $_REQUEST['submit'] ) { // don't test just on page load, form was submitted
$required = array( 'name','email' ); // required fields array
$errors = array(); // error output array
foreach ( $required as $field ) { // test for all required fields
if ( !$_REQUEST[$field] ) { // if not found
// I'm skipping the lame email test here ... it's not worth not doing it right and I don't have time
$errors[] = strtoupper( $field ); // push to output
}
}
if ( count( $errors ) ) { // if errors ...
$warning = '<br /><strong>There was an error with the form submission.</strong><br />Please complete these fields: ';
$warning .= implode( ', ', $errors );
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.warn {
color: red;
font-size: 12px;
font-family: Arial;
}
</style>
<script type="text/javascript">
window.onload = function () { // load the window before looking for form
var errors = []; // creaate an array for non-valid fields
var output = document.getElementById('output').firstChild; // grab feedback element
var form = document.getElementsByTagName('form').item(0); // good if only one form on page
form.onsubmit = function () { // form submit => do this stuff
for ( var i = 0; i < form.length; i ++ ) { // walk through all form elements
var element = form.elements[i]; // create reference to current element
if ( element.getAttribute('required') ) { // test if required element
if ( element.name == 'email' ) { // do extra testing on email element
if ( !/@/.test( element.value ) ) { // pathetic email validation -- just an example
errors.push( element.name.toUpperCase() ); // push the bad field to errors array
}
} else {
if ( !element.value ) { // test other fields, this is a simplified method for text fields
errors.push( element.name.toUpperCase() );
}
}
}
}
if ( errors.length ) { // if errors ...
output.nodeValue = 'Please fill out the following fields: ' + errors.join(', ');
errors = []; // reset errors for next submission attempt
return false; // do not submit the form yet
} else {
output.nodeValue = 'Fields marked with (*) are required';
}
};
};
</script>
</head>
<body>
<form method="POST">
<table>
<tr>
<td id="output" class="warn" colspan="2">Fields marked with (*) are required<?php print $warning ?></td>
</tr>
<tr>
<td><label for="name">Name <strong class="warn">*</strong></label></td>
<td><input type="text" required="required" id="name" name="name" value="<?php print $_REQUEST['name'] ?>" /></td>
</tr>
<tr>
<td><label for="email">Email <strong class="warn">*</strong></label></td>
<td><input type="text" required="required" id="email" name="email" value="<?php print $_REQUEST['email'] ?>" /></td>
</tr>
<tr>
<td><label for="pizza">Pizza</label></td>
<td><input type="text" required="" id="pizza" name="pizza" value="<?php print $_REQUEST['pizza'] ?>" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Due to the line-wraps it's difficult to understand this example ... I would copy the plain-text (
Toggle Plain Text link above) and paste the above code into a code-editor with line numbers and syntax highlighting ...
Hope it helps :-)
...
Unsolved 
