PHP Form Validation (CSS + HTML5)

[ahphpnz]

Hi All,

 

I'm very new to PHP and have been reading forums for the better half of two days trying to get ot the bottom of an issue I'm having with Contact form validation.

 

Problem: When submitting the form data, the information stored in a variable is not outputted to the webpage.

 

What I think I'm expecting: On form submission, the HTML5 elements should be checked to see if they are empty. If they are empty, the "string" that I'm storing in the *Err variables should then be outputted on the page to advise the use that the field has not been filled in.

 

Things I've tried: I've confirmed that Apache server is configured to allow HTML pages to be parsed as PHP and have verified that it's working by confirming that PHP scripts do run in the page, PHP includes within the HTML documents apply and that when I use <?php echo "Blah";?> on the page, it outputs correctly. When using a statement such as <?php echo $blah;?> or <?php echo "$blah";?> or <?php echo "{$blah}";?>, the content of the variable is not displayed to the user submitting the form. What am I doing wrong here? I'm trying to do this with just CSS, HTML5 and PHP - I've read about jquery and javascript but preference is to stay with the three above unless what I'm trying to do is not possible.

 

Any pointers/assistance would be hugely appreciated - I mustn't be understanding something correctly.

 

Cheers,

A

 

PHP Script: (P.S... I've intentionally left the mail component out until I get the form validating correctly).

 

<?php

htmlspecialchars($_SERVER["PHP_SELF"]);

if ($_SERVER["REQUEST_METHOD"] == "POST") {
   if (empty($_POST["name"])) {
     $nameErr = "Name is required"; echo $nameErr;
   } else {
     $name = test_input($_POST["name"]);
   }
   
   if (empty($_POST["email"])) {
     $emailErr = "Email is required";
   } else {
     $email = test_input($_POST["email"]);
   }
     
   if (empty($_POST["website"])) {
     $website = "";
   } else {
     $website = test_input($_POST["website"]);
   }
    
   if (empty($_POST["phone"])) {
     $website = "";
   } else {
     $website = test_input($_POST["phone"]);
   }

   if (empty($_POST["message"])) {
     $comment = "";
   } else {
     $comment = test_input($_POST["message"]);
   }
}

function test_input($data) {
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
}
?>

 

Markup:

 

<form class="form-style-9" method="post" enctype="multipart/form-data">
<ul>
<li>Contact Form</li>    
<li>
    <input type="text" name="name" required class="field-style field-split align-left" placeholder="Name"><span class="error">*<?php echo $nameErr;?></span>
    <input type="email" name="email" required class="field-style field-split align-right" placeholder="Email">

</li>
<li>
    <input type="tel" name="phone" required class="field-style field-split align-left" placeholder="Phone">
    <input type="url" name="website" class="field-style field-split align-right" placeholder="Website">
</li>
<li>
<input type="text" maxlength="20" min="5" name="subject" required class="field-style field-full align-none" placeholder="Subject">
</li>
<li>
<textarea name="message" maxlength="200" required class="field-style" placeholder="Message"></textarea>
</li>
<li>
<input id="submit" name="submit" type="submit" value="Send Message">
</li>
</ul>
</form>

Edited January 19, 2015 by ahphpnz

[Jacques1]

I think there's a lot of confusion about the basics.

 

If the browser supports HTML5 and the user leaves a required field empty, then the form isn't submitted at all. That's the whole point. And if the form isn't submitted, then your PHP script is never executed.

 

The only way to see your custom error messages is to use a browser without HTML5 support (or circumvent the form validation). In that case, the form will be submitted despite the empty fields and trigger your server-side validation.

[ahphpnz]

Hi Jacques, that is indeed the problem. The Saffari browsers do not support HTML5 so the validation on the server side needs to happen. From a HTML5 perspective, the client side validation is working fine, its Saffari, Apple and Android devices that dont support the HTML5 validation. So I figured I would look in to a work around fix by applying the server side validation.

 

Is there a way to pass a set variable back to the web page in the web response and append to an element ID or name so that its dynamically displayed on the same web page? similar to what you would do with the document.getElementId('element ID').innerHTML method in javascript? Just trying to keep away from multiple languages if its possible to avoid.

[maxxd]

While it is possible to avoid using multiple languages in this case, I'd advise against doing so.

 

Use JavaScript to back up your HTML5 validation on the client, then use php on the server to validate the data that's already passed the client-side validation. You can check for simple things like blank values and malformed e-mail addresses and whatnot using JavaScript to give your users immediate feedback and avoid wasting their time with a page refresh if something is obviously wrong. Then you do a deeper validation and make sure that not only is all the necessary data present, but that it's in a format and made up of values you expect using php on the server side.

 

Always assume that your user is malicious and trying to mess with your application - it's a cynical as all get-out but completely and totally necessary point of view...