Form validation is an essential part of web development. It helps ensure that users enter valid and complete information before submitting a form. By validating data on the client side, you can provide instant feedback to users and reduce unnecessary requests to the server.

In this tutorial, you will learn how to create a simple registration form and validate it using the jQuery Validation Plugin before submitting the data to a PHP application.

Why Use jQuery Validation?

The jQuery Validation Plugin is one of the most popular plugins for form validation because it:

  • Provides instant feedback to users
  • Reduces invalid form submissions
  • Supports custom validation rules
  • Works with all modern browsers
  • Is easy to integrate with existing forms
  • Improves overall user experience

Validation Workflow

https://images.openai.com/static-rsc-4/Qh7KQSKIzAw0lNYdp8cE0DyUC4c6SM2PNdfW2L5fg8UknuWsCm53wYxSHXA_agT6hvvlkfyDc-kcroGUB5-6Sxtwv6y6odOkDLVkrwtJ_eMU_9PoUxOf05cFW6HMzVpuI8vgtCKyA8L_qrFChyUcrERaq-6z0SRkhFLy1Ir7iHW48hAzOAP-Ah_WjgFx4yT0?purpose=fullsize
User Fills Form
       │
       ▼
jQuery Validation Checks Input
       │
 ┌─────┴─────┐
 │           │
 ▼           ▼
Invalid     Valid
 │           │
 ▼           ▼
Show Error  Submit Form
Messages    to PHP Server
                 │
                 ▼
         Server-Side Validation
                 │
                 ▼
           Process Data

Prerequisites

Before getting started, make sure you have:

  • Basic knowledge of HTML and PHP
  • A web server such as Apache, Nginx, XAMPP, or WAMP
  • Internet access to load jQuery libraries from a CDN

Step 1: Include jQuery and Validation Plugin

Create a new file named index.html and include the required JavaScript libraries.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/jquery.validate.min.js"></script>

These libraries provide the functionality needed to validate form inputs.

Step 2: Create the HTML Form

Create a simple registration form containing First Name, Last Name, Email, and Password fields.

<form action="" id="example" method="post">

    <label for="firstname">First Name</label>
    <input type="text"
           name="firstname"
           id="firstname"
           placeholder="Karthik">

    <label for="lastname">Last Name</label>
    <input type="text"
           name="lastname"
           id="lastname"
           placeholder="N">

    <label for="email">Email</label>
    <input type="email"
           name="email"
           id="email"
           placeholder="karthik@example.com">

    <label for="password">Password</label>
    <input type="password"
           name="password"
           id="password"
           placeholder="Password">

    <button type="submit">Register</button>

</form>

Step 3: Add CSS Styling

To make validation messages more user-friendly, add some basic styling.

<style>
body {
    font-family: Arial, sans-serif;
}

label {
    display: block;
    margin-top: 10px;
}

input {
    width: 300px;
    padding: 8px;
    margin-top: 5px;
}

button {
    margin-top: 15px;
    padding: 10px 20px;
}

label.error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}

input.error {
    border: 1px solid red;
}

input.valid {
    border: 1px solid green;
}
</style>

Step 4: Define Validation Rules

Now initialize the jQuery Validation Plugin and define the validation rules.

$("#example").validate({

    rules: {

        firstname: "required",

        lastname: "required",

        email: {
            required: true,
            email: true
        },

        password: {
            required: true,
            minlength: 5
        }
    },

    messages: {

        firstname: "Please enter your first name",

        lastname: "Please enter your last name",

        email: "Please enter a valid email address",

        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        }
    },

    submitHandler: function(form) {
        form.submit();
    }

});

Validation Rules Explained

Field Rule Description
firstname required Cannot be empty
lastname required Cannot be empty
email required, email Must contain a valid email format
password required, minlength Minimum length of 5 characters

Step 5: Add Server-Side PHP Validation

Client-side validation improves usability, but users can bypass JavaScript. Always validate data again on the server.

<?php

$errors = [];

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    if (empty($_POST['firstname'])) {
        $errors[] = "First name is required";
    }

    if (empty($_POST['lastname'])) {
        $errors[] = "Last name is required";
    }

    if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $errors[] = "Invalid email address";
    }

    if (strlen($_POST['password']) < 5) {
        $errors[] = "Password must contain at least 5 characters";
    }

    if (empty($errors)) {
        echo "Form submitted successfully!";
    }
}
?>

Complete Example

<!DOCTYPE html>
<html>
<head>

<title>jQuery Form Validation Example</title>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/jquery.validate.min.js"></script>

<style>

body {
    font-family: Arial, sans-serif;
    margin: 30px;
}

.container {
    width: 400px;
}

label {
    display: block;
    margin-top: 10px;
}

input {
    width: 100%;
    padding: 8px;
}

button {
    margin-top: 15px;
    padding: 10px 20px;
}

label.error {
    color: red;
    font-size: 14px;
}

input.error {
    border: 1px solid red;
}

input.valid {
    border: 1px solid green;
}

</style>

<script>

$(function() {

    $("#example").validate({

        rules: {

            firstname: "required",

            lastname: "required",

            email: {
                required: true,
                email: true
            },

            password: {
                required: true,
                minlength: 5
            }

        },

        messages: {

            firstname: "Please enter your first name",

            lastname: "Please enter your last name",

            email: "Please enter a valid email address",

            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            }

        },

        submitHandler: function(form) {
            form.submit();
        }

    });

});

</script>

</head>

<body>

<div class="container">

<h2>Registration Form</h2>

<form id="example" method="post">

<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">

<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">

<label for="email">Email</label>
<input type="email" name="email" id="email">

<label for="password">Password</label>
<input type="password" name="password" id="password">

<button type="submit">Register</button>

</form>

</div>

</body>
</html>

Conclusion

The jQuery Validation Plugin provides a simple and effective way to validate HTML forms before submission. It improves user experience by displaying instant feedback when users enter invalid data and helps reduce unnecessary server requests.

However, client-side validation should never be considered a replacement for server-side validation. Combining jQuery validation with PHP validation ensures that your application remains both user-friendly and secure.

By following the steps in this tutorial, you can quickly implement professional form validation in any PHP-based web application.

Post Views: 203

Leave a Reply