Display PHP Form Validation Results on Same Page

Question

I'm sure the initial reaction is going to be something like, "Doesn't this guy have Google?" Yes, I'll admit this does seem like a pretty basic concept and I've tried and tried to wrap my head around it, looked up all manner of posts and articles on the topic, etc., but all to no avail. Perhaps you can point me in the right direction?

I have a basic contact form (contact.html) that I run with an external PHP script (contact.php). Here's the HTML form code:

<form id="form1" action="contact.php" method="post">
<div class="form1">
<label>Your Name:</label>
<span><input type="text" name="name" /></span>
</div>
<div class="form1">
<label>Your School:</label>
<span><input type="text" name="school" /></span>
</div>
<div class="form1">
<label>Phone Number:</label>
<span><input type="text" name="phone" /></span>
</div>
<div class="form1">
<label>E-Mail Address:</label>
<span><input type="text" name="email" /></span>
</div>
<div class="form3">
<span><textarea cols="1" rows="1" name="message"></textarea></span>
</div>
<div class="wrapper">
<input class="submit" type="image" src="images/contact_submit.png" name="submit" alt="Submit" />
</div>
</form>

The PHP script validates that all of the fields were entered and then processes the form:

<?php

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//Validate the name:
if (!empty($_POST['name'])) {
    $name = $_POST['name'];
} else {
    echo "You forgot to enter your name.<br>";
}

//Validate the school:
if (!empty($_POST['school'])) {
    $school = $_POST['school'];
} else {
    echo "You forgot to enter your school.<br>";
}

//Validate the e-mail:
if (!empty($_POST['email'])) {
    $email = $_POST['email'];
} else {
    echo "You forgot to enter your e-mail.<br>";
}

//Validate the message:
if (!empty($_POST['message'])) {
    $message = $_POST['message'];
} else {
    echo "You forgot to enter a message.";
}

if (!empty($_POST['name']) && !empty($_POST['school']) && !empty($_POST['email']) && !empty($_POST['message'])) {
    $phone = $_POST['phone'];
    $body = "$name\n$school\n$phone\n$email\n\n$message";
    mail("***", "PAL Website - Message from a Visitor", $body);
    header("Location: confirm.html");
}

}

?>

Everything works great and the form is validated and processed as intended. However, I REALLY want to set it up so that the error messages are displayed on the same page or at least have the form refreshed with the error messages included.

I've seen this done in other demonstrations (Larry Ullman's book, for example), but still can't quite figure out how to make it happen. Can you please offer advice? What's the simplest way to go about it?

Here's the page URL, if it helps: http://www.712jefferson.org/pal/contact.html

Thank you!

Answer 1

I'd use jQuery for this. Modifications to be made:

in HTML: add id to your input fileds, so you can "grab" them with jQuery (You can see the usage in the $.post method below).

<form id="form1" action="contact.php" method="post">
   <div class="form1">
      <label>Your Name:</label>
      <span><input id="name" type="text" name="name" /></span>
   </div>
   <div class="form1">
      <label>Your School:</label>
      <span><input id="school" type="text" name="school" /></span>
   </div>
   <div class="form1">
      <label>Phone Number:</label>
      <span><input id="phone" type="text" name="phone" /></span>
   </div>
   <div class="form1">
      <label>E-Mail Address:</label>
      <span><input id="email" type="text" name="email" /></span>
   </div>
   <div class="form3">
      <span><textarea id="message" cols="1" rows="1" name="message"></textarea></span>
   </div>
   <div class="wrapper">
      <input class="submit" type="image" src="images/contact_submit.png" name="submit" alt="Submit" />
   </div>
</form>

in PHP: if there is no error in validation echo this: "success"

if (!empty($_POST['name']) && !empty($_POST['school']) && !empty($_POST['email']) && !empty($_POST['message'])) {
    echo "success";
    $phone = $_POST['phone'];
    $body = "$name\n$school\n$phone\n$email\n\n$message";
    mail("***", "PAL Website - Message from a Visitor", $body);
    header("Location: confirm.html");
}

Attach jQuery library to your site and use the code below in your HTML file inside brackets or in an external *.js file attached to Your site. In Your HTML file's section use this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

jQuery script:

$('#form1').submit(function() {
    event.preventDefault(); 
    $.post("contact.php", {name: $("#name").val(), school: $("#school").val(), phone: $("#phone").val(), email: $("#email").val(), message: $("#message").val()}, function(data){
        if(data !="success"){
            alert(data);
        }
    });
});

This will give Your error messages in a alert window and Your site won't reload if I'm not mistaken.

Answer 2

There are many ways of doing this so this is a opinion based question which will get you several ways of accomplishing this.

You could do an ajax request to submit the data that way no reloading of the page and on the success of the call if any errors are in the response show the errors near the input that caused the error. This would require the use of javascript and setting a hidden element to the error and displaying it or generating the element containing the error and appending it to the DOM.

do as Amal Murali shows and put the html and validation script in the same script file and output the errors right away, or even better echo the errors near the inputs that caused them

yet another way would be to have contact.php do the validation and then on invalid data print out contact.html and again put the errors near the inputs.