CodeIgniter 4 jQuery Form Validation Example

Hi Guys,

In this example,I will explain jQuery Form Validation in CodeIgniter 4. I will show example of codeigniter 4 jquery form validation. you can easyliy use jQuery Form Validation in codeigniter 4.you will learn how to create bootstrap forms and validate form data on client-side by using jQuery library. And also validate form data on the server-side by using the validation library of CodeIgniter 4.

In this CodeIgniter 4 jQuery validation on Bootstrap form example, we will use the jQuery form validation library that validates form data on client browser.

Here, I will give you full example for simply jQuery Form Validation in codeigniter 4 as bellow.

Step 1: Download Codeigniter Project

In this step, we will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”

Step 2: Basic Configurations

Next, we will set 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 With Table

In this step, we need to create a database name demo, so let’s open your PHPMyAdmin and create the database with the name demo. After successfully create a database, you can use the below SQL query for creating a table in your database.

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

Step 4: Setup Database Credentials

In this step, we need to connect our project to the database. we need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, We need to set up database credentials in this file like below.

 
public $default = [ 
    'DSN'      => '', 
    'hostname' => 'localhost', 
    'username' => 'root', 
    'password' => '', 
    'database' => 'demo', 
    'DBDriver' => 'MySQLi', 
    'DBPrefix' => '', 
    'pConnect' => false, 
    'DBDebug'  => (ENVIRONMENT !== 'production'), 
    '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

So go to app/Models/ and create here one model. And you need to create one model name contactModel.php and update the following code into your contactModel.php file:

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

Create Controller

Now Go to app/Controllers and create a controller name Contact.php. In this controller, we will create some method/function. We will build some of the methods like :

->Index() – This is used to display contact us form.

->create() – This is used to validate form data server-side and store into mysql database.