PHP Form Validation - displaying errors on the same page - php

Question

I have a form and I'm wanting to display error messages at each input if it's not filled in correctly.
Here is the code so far:
HTML:
<form id="contactForm" action="contact.php" method="post">
<div>
<input type="text" name="name" id="name" placeholder="Your Name" maxlength="65" tabindex="1">
<label for="name">Name</label>
<span class="error"><?php include 'contact.php'; echo "$nameErr";?></span>
</div>
<div>
<input type="email" name="_replyto" id="email" placeholder="Your Email" maxlength="30" tabindex="2">
<label for="email">Email</label>
<span class="error"><?php include 'contact.php'; echo "$emailErr";?></span>
</div>
<div>
<textarea name="message" id="message" rows="10" placeholder="Your Message..." maxlength="1000" tabindex="3" ></textarea>
<label for="message">Your Message</label>
<span class="error"><?php include 'contact.php'; echo "$commentErr";?></span>
</div>
<div>
<input type="submit" value="Send" tabindex="4">
</div>
</form>
PHP:
<?php
// Check for form submission:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
/* The function takes one argument: a string.
* The function returns a clean version of the string.
* The clean version may be either an empty string or
* just the removal of all newline characters.
*/
function spam_scrubber($value) {
// List of very bad values:
$very_bad = array('to:', 'cc:', 'bcc:', 'content-type:', 'mime-version:', 'multipart-mixed:', 'content-transfer-encoding:');
// If any of the very bad strings are in
// the submitted value, return an empty string:
foreach ($very_bad as $v) {
if (stripos($value, $v) !== false) return '';
}
// Replace any newline characters with spaces:
$value = str_replace(array( "\r", "\n", "%0a", "%0d"), ' ', $value);
// Return the value:
return trim($value);
} // End of spam_scrubber() function.
// Clean the form data:
$scrubbed = array_map('spam_scrubber', $_POST);
$nameErr = $emailErr = $commentErr = "";
$name = $email = $comment = "";
// Form validation:
if (empty($scrubbed['name'])){
$nameErr = "Please tell me your name";
}
} // End of main isset() IF.
?>
I have a span in the html that contains a variable from the PHP file. The variable is meant to diaply an error message if the field isn't completed. At the moment however, if I click send without any fields being filled in, it just goes to a blank page. This blank page is the contact.php. I want it to stay on contact.html and display the errors.
The above code is only validating the name field at the moment.
Any help with this would be highly appreciated.
Thanks.

Answer 1

You are getting a blank page because the form is submitting. You need to prevent it from submitting until the validation is complete.
In JavaScript, use a onsubmit="return validateForm()". Make this function return true if the fields are valid, false if not, and in there you can set the content of your error spans.
So,
<form id="contactForm" action="contact.php" onsubmit="return validateForm()" method="post">
and you will need to write the validateForm function.
This should be a good place to start!