In this tutorial, I'll show you how easy it is to do just that—validate and submit a contact form without page refresh using jQuery! Let's get started.
Submit a Form Without Page Refresh Using jQuery
What We're Building
In this example, we have a simple contact form with name, email, and phone number. The form submits all the fields to a PHP script without any page refresh, using native jQuery functions.
1. Build the HTML Form
Let's take a look at our HTML markup. We begin with our basic HTML form:
1
id="contact_form">
2
3
4
class="input-box">
5
id="contact_form">
0
id="contact_form">
1
id="contact_form">
2
id="contact_form">
3
id="contact_form">
4
id="contact_form">
5
id="contact_form">
6
class="input-box">
id="contact_form">
8
id="contact_form">
9
2
0
2
1
2
2
id="contact_form">
3
2
4
id="contact_form">
5
2
6
class="input-box">
2
8
2
9
0
1
2
id="contact_form">
3
4
id="contact_form">
5
6
7
8
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
0
1
You might notice that I have included a
30 with id
31 that wraps around the entire form.
Be sure to not miss that
30 in your own form as we will be needing this wrapper
30 later on. You might also notice that I have left both the action and the method parts of the form tag blank. We actually don't need either of these here, because jQuery takes care of it all later on.
Another important thing is to be sure to include the
34 values for each input field. The
34 values are what your jQuery script will be looking for to process the form with.
We are also doing some very basic client-side validation using HTML5 attributes like
36 and
37. The
37 attribute will make sure that users supply a name that is at least three characters long. Similarly, the
36 attribute makes sure that users fill out all the form values you need.
You can read more about these attributes in our tutorial on validating form inputs using only HTML5 and Regex.
Form Input Validation Using Only HTML5 and Regex
Monty Shokeen
26 Mar 2021
I've added some CSS styles to produce the following form: