Learn
Introduction to PHP Form Validation
Simple Validation

In the previous exercise, we simply displayed the user input we received. Now we want to provide the user with feedback if their input isn’t correct. We’ll validate (confirm the correctness of) the data we receive. If the input is deemed invalid, we’ll want to give the user meaningful feedback so that they can correct their mistake and attempt to submit the form again.

We’ll need to make several modifications to the PHP file that we use to serve our form to users:

  1. Add PHP code to check the validity of a user’s input if the form has been submitted.
  2. Add an HTML element to display an error message to the user if their submission is not valid.
  3. Fill each field in the form with the user’s previously submitted input.

Our third task has to do with creating an improved user experience. Have you ever had to refill every field in a form after submitting it incorrectly? It’s so frustrating! By filling in the user’s submitted values, they’ll be able to quickly correct any fields with errors without having to start over from scratch. To accomplish this, we’ll assign each of the HTML form element’s value attribute—aside from the "submit" input itself—to the data submitted by the user for each field.

For the purposes of this exercise, let’s assume that “PHP” is the only valid submission for the user’s favorite language. Here’s how we might update our form from the previous exercise to accomplish the three tasks above:

<?php $validation_error = ""; $user_language = ""; if ($_SERVER["REQUEST_METHOD"] === "POST") { $user_language = $_POST["language"]; if ($user_language != "PHP") { $validation_error = "* Your favorite language must be PHP!"; } } ?> <form method="post" action=""> Your Favorite Programming Language: <input type="text" name="language" value="<?php echo $user_language;?>"> <p class="error"><?= $validation_error;?></p> <input type="submit" value="Submit Language"> </form>

Let’s walk through the above code.

  • We first assign $validation_error and $user_language to empty strings. We use these PHP values in our HTML, but, if a user has NOT yet submitted their form, we don’t want these elements to have filled in values.
  • Remember that we’re validating the form data only AFTER it’s been submitted by the user at least once. To ensure that, we only run our validation code if ($_SERVER["REQUEST_METHOD"] === "POST"), which indicates that the current form has been submitted.
  • Within our if block, we grab the relevant value from the $_POST array: $_POST["language"]. We assign this value to our $user_language variable. This one step actually accomplishes two things! It gives us an easy way to talk about the value the user submitted to this field, and it also means the value of the HTML element will now be the user’s submission rather than an empty string.
  • If the value the user submitted is NOT correct, we assign an error message to $validation_error so that this part of the HTML will now give the user important feedback.

Let’s give it a try!

Instructions

1.

In the following tasks, you’ll be providing your validation logic within a function that you’ll invoke multiple times within the HTML.

In the PHP section of your code (above the HTML), write a function checkWord(). This function will be used to generate an error if the user submitted a word that does not start with the correct letter.

Your function should have two parameters:

  • A string representing the user’s input.
  • A string with the letter to which the input is supposed to correspond.

If the form has been submitted ($_SERVER["REQUEST_METHOD"] === "POST") and the first letter in the input is NOT the correct letter, your function should return the following string: "* This word must start with the letter [current letter]!" with [current letter] replaced by the letter currently being tested. Otherwise, your function should return an empty string.

checkWord("apple", "b"); // Returns: "* This word must start with the letter b!"

Note that "A" and "a" are not considered the same value by PHP by default. You can choose whether your function accounts for this or not.

2.

Add three <p> elements to the HTML <form>—one below each <input>. All three should have a class of "error".

  • The <p> below the "a-word" input should have an id of "a-error".
  • The <p> below the "b-word" input should have an id of "b-error".
  • The <p> below the "c-word" input should have an id of "c-error".

The inner HTML of each error <p> element should be assigned to the value returned when your checkWord() function is invoked with the corresponding element from the $_POST array and the appropriate letter.

3.

Assign the value attribute of each input tag to the value submitted by a user. For example, if a user enters the word “apple” in the first input field, they should still see apple in that input field once they submit their form.

Folder Icon

Take this course for free

Already have an account?