Simple HTML Form Validation Using JQuery

The form allows you to check whether an input from the user is valid or not. This helps you ensure that the type of data inserted by the user is same as field expects to be.

In this tutorial, we will look on how to Validate an HTML Form with JQuery.

The form collects the user input and performs a simple check if the data matches the field type.If otherwise an error warning is displayed asking the user to input correct type of data.

Overview

In order to complete the task, we need to create following files. Bundle the files in the same directory. We will discuss the functions of each of the files in the later part of the guide.

  1. PHP
  2. Message-form.js
  3. PHP

Index.php

The index file contains the simple HTML form that allows a user to give the inputs. The file imports JQuery from a CDN which allows us to use a Library online without downloading locally.

<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Tutorial-03</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="message-form.js"></script>
</head>
<body>
<center>
<div id="main_form">

<form id="form">
<h3>Contact Form</h3>
<p id="returnmessage"></p>
<label>Name: <span>*</span></label>
<input type="text" id="name" placeholder="Name"/> </br>
<label>Email: <span>*</span></label>
<input type="text" id="email" placeholder="Email"/> </br>
<label>Contact No:<span>*</span></label>
<input type="text" id="contact" placeholder="10 digit Mobile no."/> </br>
<label>Message:</label>
<textarea id="message" placeholder="Message"></textarea> </br>
<input type="button" id="submit" value="Send Message"/>
</form>

</div>
</center>

</body>
</html>

Message-form.js

Message Form  is a file that contains the JQuery code which we uses against the index form in order to validate it, in this first we take the data from the form to separate variables as shown in the below code and then first check if the values are null if not we send the values back to server side script to process.

$(document).ready(function () {
$("#submit").click(function () {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$("#returnmessage").empty(); // To remove any previous messages.
// Validating Fields
if (name == '' || email == '' || contact == '') {
alert("Please Fill Required Fields");
} else {
// Check and Return Successful message when data is successfully received .
$.post("process_contact_form.php", {
name_res: name,
email_res: email,
message_res: message,
contact_res: contact
}, function (data) {
$("#returnmessage").append(data); // Add Message that needs to be displayed.
if (data == "Request Received For Processing") {
$("#form")[0].reset(); // Reset Form
}
});
}
});
});

Procces_contact_form.php

This file contains the code which handles the POST request. After the code process the data, it will send a message saying “Request Received for Processing” which will be captured in the previous JQuery code and use to process rest of the file.

<?php
// Fetching Values from POST Method.
$name = $_POST['name_res'];
$email = $_POST['email_res'];
$message = $_POST['message_res'];
$contact = $_POST['contact_res'];
$email = filter_var($email, FILTER_SANITIZE_EMAIL); // Sanitizing E-mail.

// After sanitization Validation is performed
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
if (!preg_match("/^[0-9]{10}$/", $contact)) {
echo "<span>Invalid Contact Number - Check Contact Number Again</span>";
} else {
echo "Request Received For Processing";
}
} else {
echo "<span>Invalid Email - Check Email Again</span>";
}
?>

Download Source code and Working Demo.

Download the complete source code.

Grab the the free working demo Intantly!

You have Successfully Suscribed!

One thought on “Simple HTML Form Validation Using JQuery

  1. Wow! Thank You very much. This was very helpful. Had been looking for this all over. Finally stumbled upon this site. Very much detailed information with downloadable source codes. Thanks a bunch!

Leave a Reply

Your email address will not be published. Required fields are marked *