CodeIgniter 4 jQuery Form Validation Example

Admin   Jquery   492  2021-03-13 14:00:05

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.