CodeIgniter 4 jQuery Form Validation Example Tutorial

CodeIgniter 4 jQuery form validation example tutorial. In this example, i will show you in detail on how to add jquery validation rules with forms in Codeigniter 4 apps. And also you will learn how jQuery validation rules work without refreshing the page.

Note that, the validation happens on both sides like server-side and client-side, And, I will explain to you about jquery validation(client side validation) in codeigniter 4 apps using jquery validation library. And as well as, server side validation in Codeigniter 4 apps.

The jQuery validate js is a very powerful and easy to use client-side form validation plugin; it offers tons of customization options. It makes your validation work facile due to the wide array of validation options, and yes, it supports more than 35 languages.

If you want to add validation rules without refreshing the codeigniter 4 form. So for this you have to integrate jquery validation rules in your codeigniter 4 form. So that when you fill the form or submit empty. Then the jquery validation rules will display an error message to you on codeigniter 4 form. And this message will not be deleted till then. Until the form passes the validation rules.

For the CodeIgniter 4 jQuery form validation example , I’ll create a contact form and add the jQuery validation rules to it.

How to Use jQuery Validation for Validate Form in Codeigniter 4 App

You can learn by following the steps given below on how to add validate in form in CodeIgniter 4 apps:

  • Install Codeigniter 4 Application
  • Basic App Configurations
  • Create Database and Table
  • Setup Database Credentials
  • Create Model and Controller
  • Create Views
  • Setup Routes
  • Start Development server

Step 1 – Install Codeigniter 4 Application

First of all, you need to ownload the latest version of Codeigniter 4. So, visit this link https://codeigniter.com/download Download Codeigniter 4 app and unzip the setup in your local system xampp/htdocs/ .

Note that, please change the download folder name “demo”.

Step 2 – Basic App Configurations

Now, you need to some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.

Set Base URL like this

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';

Step 3 – Create Database and Table

Create a database and table by executing the following SQL query:

CREATE DATABASE demo;

CREATE TABLE contacts(
    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(150) NOT NULL COMMENT 'Name',
    email varchar(255) NOT NULL COMMENT 'Email',
    message varchar(250) NOT NULL COMMENT 'Message',
    created_at varchar(20) NOT NULL COMMENT 'Date Created',
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='contact form table' AUTO_INCREMENT=1;

Step 4 – Setup Database Credentials

To connect your codeigniter 4 app to the database. So, visit app/Config/ directory and open Database.php. Then add the databasae details like below into database.php file:

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'test',
        'password' => '4Mu99BhzK8dr4vF1',
        'database' => 'demo',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'development'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
	];

Step 5 – Create Model and Controller

Create ContactFormModel.php file, so visit app/Models/ directory and create ContactFormModel.php file. Then add the following code into your ContactFormModel.php file:

<?php 

namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;
 
class ContactFormModel extends Model
{
    protected $table = 'contacts';
    protected $allowedFields = [
        'name', 
        'email', 
        'message'
    ];
}

Create ContactFormController.php file. So, visit app/Controllers directory and create ContactFormController.php.Then add the following code into it:

<?php 

namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\ContactFormModel;
 
class ContactFormController extends Controller
{
    public function index()
    {    
      return view('contact_form');
    }
 
    public function form()
    {  
        helper(['form', 'url']);
            
        $isValid = $this->validate([
            'name' => 'required',
            'email' => 'required',
            'message'  => 'required',
        ]);

        $contactFormModel = new ContactFormModel();

        if (!$isValid)
        {
            echo view('contact_form', [
                'validation' => $this->validator
            ]);
        } else
        {
            $contactFormModel->save([
                'name' => $this->request->getVar('name'),
                'email'  => $this->request->getVar('email'),
                'message'  => $this->request->getVar('message'),
            ]);

            echo view('thank_you');
        }
    }
}

The index() function renders the contact form template into the view.

The form() method handles the form of validation and contains various variables.

Step 6 – Create Views

Create contact_form.php view file, so visit application/views/ directory and create contact_form.php file. Then add the following HTML into contact_form.php file:

<!DOCTYPE html>
<html>

<head>
    <title>Codeigniter 4 jQuery Form Validation Demo - Laratutorials.com</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <style>
        .error {
            width: 100%;
            margin-top: .25rem;
            font-size: .875em;
            color: #dc3545;
        }
    </style>
</head>

<body>
    <div class="container mt-5" style="max-width: 500px">
        <form id="contact_form" method="post" action="<?php echo base_url('ContactFormController/form') ?>"
            name="contact_form">
            <div class="form-group mb-3">
                <label class="fw-bold mb-2">Name</label>
                <input type="text" name="name" class="form-control">
            </div>
            <div class="form-group mb-3">
                <label class="fw-bold mb-2">Email</label>
                <input type="text" name="email" class="form-control">
            </div>
            <div class="form-group mb-3">
                <label class="fw-bold mb-2">Message</label>
                <textarea name="message" class="form-control"></textarea>
            </div>
            <div class="d-grid">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/additional-methods.min.js"></script>
    <script>
        if ($("#contact_form").length > 0) {
            $("#contact_form").validate({
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true,
                        maxlength: 60
                    },
                    message: {
                        required: true,
                    },
                },
                messages: {
                    name: {
                        required: "Name is required",
                    },
                    email: {
                        email: "It doe not seem valid email",
                        required: "Email is required",
                        maxlength: "Upto 50 characters are allowed",
                    },
                    message: {
                        required: "Please, enter the query",
                    },
                },
            })
        }
    </script>
</body>

</html>

Then create thank_you.php file and add the following code into:

<!DOCTYPE html>
<html>

<head>
    <title> Codeigniter 4 Form Submitted - Thank You Page </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5" style="max-width: 500px">
        <div class="alert alert-success text-center" role="alert">
            <h2>Your message has been received!</h2>
        </div>
    </div>
</body>

</html>

Step 7 – Setup Routes

To define a route, So, visit app/Config/ directory and open Routes.php file. Then add the following routes into it:

$routes->setDefaultController('ContactFormController');
$routes->get('/', 'ContactFormController::index');

Note that, the routes will be displaying the contact form and submitting the data in the database on successful form submission.

Step 8 – Start Development server

Execute the following command into command prompt or terminal to start the codeigniter 4 application:

php spark serve

Then visit your web browser and hit the following url on it:

http://localhost/demo/

OR

http://localhost:8080/

Conclusion

CodeIgniter 4 jQuery form validation example tutorial. In this example,you have learned how to add jquery validation rules with forms in Codeigniter 4 apps. And also will learned how jQuery validation rules work without refreshing the page.

Recommende CodeIgniter 4 Tutorial

  1. How to Install / Download Codeigniter 4 By Manual, Composer, Git
  2. How to Remove Public and Index.php From URL in Codeigniter 4
  3. Codeigniter 4 Form Validation Example Tutorial

Leave a Comment