There are many use cases for forms on your website. Anything from surveys to e-commerce transactions require a form to be filled out by the visitor. Perhaps the most common usage of a form is a contact form that visitors fill out if they want you to get in touch with them for whatever reason.
Trouble with forms is that they are prone to user error and visitors don’t always fill in the correct information or do so in the manner that you intend. To circumvent these issues, you can add a script that will add form validation to your form so that the information comes through as expected.
Building the form
Firstly, you are going to need a form. Building a simple contact form is easy enough and will look something like this:
You’ll see some items of note included in this code. The action of the form is set to
form_handler.php. This is a PHP script that we will use in another article to submit the form and email the inputted data. On the actual input fields, you’ll see that a class of
required has been added to all of them. This class will be used in the jQuery script to determine which fields must be filled out in order for the form to submit without error. Additionally, you’ll notice that a class of
phone has been added to their respective fields. These classes will be used to ensure that an actual email address and an actual phone number are entered.
All-new Echo (2nd Gen) has a new speaker, new design, and is available in a range of styles including fabrics and wood veneers. Echo connects to Alexa to play music, make calls, set music alarms and timers, ask questions, control smart home devices, and more—instantly.
Adding the jQuery Script
Before you do anything else, be sure that you have included jQuery in your project. This can either be downloaded by visiting https://jquery.com/download or by using a CDN (which is recommended). To include jQuery using Google’s CDN, simply copy and paste this code into either your
<head> tag or right before the closing
When a visitor clicks the “Submit” button, this script is fired. It loops through every input field to which the
required class has been added and checks to see if the input field is empty. If that field is empty, a class of
error is added. If any errors are detected, an alert message fires and the form submit fails. If no empty fields are detected, then the form submits successfully.
Getting the Right Information
The above script works great if all you want to do is make sure that no fields are submitted with empty values. However, the form includes an email and a phone field which you will want to be filled out with the correct formatting. In order to do this, you can use regular expressions to test the information submitted by the visitor. If certain parameters are met, then the field will validate correctly.
For this form, we are going to use 2 regular expressions, one to check for a valid email address (one containing a,
@ symbol and a domain extension such as
.net), and one to check for a 10 digit phone number.
Replace the former script with the following if you want your email and phone fields to be checked for correct formatting:
Now, our email and phone fields will have an
error class added to them if the correct formatting is not detected and the form submit will fail. Otherwise, they will validate properly and the form with submit correctly.
That’s it, that’s all you need in order to validate your contact form. In the next article, we will show you how to use PHP to send the form data to an email address.
To see a fiddle of the code used in this article, you can do so here.