CodeIgniter 4 jQuery Form Validation Tutorial

In Codeigniter 4, jQuery Validation is a lightweight library of JavaScript that allows users to validate forms on the client side and display validation error messages on the client side before submitting the form.

Here are steps to add jQuery in form and validate on the client side:

Step 1: Setup Codeigniter Project

In this step, you 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, you 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, you 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, you need to connect our project to the database. So, go to app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, and add the 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 File

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'];
}

Now Go to app/Controllers and create a controller name Contact.php. In this controller, you will create some method/function. you 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.

<?php namespace App\Controllers;
use CodeIgniter\Controller;
use App\Models\ContactModel;
class Contact extends Controller
{
    public function index()
    {    
         return view('contact');
    }
    public function create()
    {  
	helper(['form', 'url']);
        
        $val = $this->validate([
	        'name' => 'required',
	        'email' => 'required',
	        'message'  => 'required',
	    ]);
	    $model = new ContactModel();
	    if (!$val)
	    {
	        echo view('contact', [
	               'validation' => $this->validator
	        ]);
	    }
	    else
	    { 
	  
	        $model->save([
	            'name' => $this->request->getVar('name'),
	            'email'  => $this->request->getVar('email'),
	            'message'  => $this->request->getVar('message'),
	        ]);
	        echo view('success');
	    }
	}
}

Step 6: Create Views

Now you need to create contact.php, go to application/views/ folder and create contact.php file. and update the following HTML into your files:

<!DOCTYPE html>
<html>
<head>
  <title>Codeigniter 4 jQuery Form Validation Example</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
</head>
<body>
 <div class="container">
    <br>
    <?= \Config\Services::validation()->listErrors(); ?>
    <div class="row">
      <div class="col-md-9">
        <form action="<?php echo base_url('contact/create') ?>" name="contact" id="contact" method="post" accept-charset="utf-8">
          <div class="form-group">
            <label for="formGroupExampleInput">Name</label>
            <input type="text" name="name" class="form-control" id="formGroupExampleInput" placeholder="Please enter name">
            
          </div> 
          <div class="form-group">
            <label for="email">Email Id</label>
            <input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
            
          </div>   
          <div class="form-group">
            <label for="message">Message</label>
            <textarea name="message" class="form-control"></textarea>
            
          </div>
          <div class="form-group">
           <button type="submit" id="send_form" class="btn btn-success">Submit</button>
          </div>
        </form>
      </div>
    </div>
 
</div>
 <script>
   if ($("#contact").length > 0) {
      $("#contact").validate({
     
    rules: {
      name: {
        required: true,
      },
 
      email: {
        required: true,
        maxlength: 50,
        email: true,
      }, 
      message: {
        required: true,
      },   
    },
    messages: {
       
      name: {
        required: "Please enter name",
      },
      email: {
        required: "Please enter valid email",
        email: "Please enter valid email",
        maxlength: "The email name should less than or equal to 50 characters",
        },      
     message: {
        required: "Please enter message",
      },
        
    },
  })
}
</script>
</body>
</html>

Now you need to create success.php file, so go to application/views/ and create success.php file. And put the below code here.

<!DOCTYPE html>
<html>
<head>
  <title> Codeigniter 4 Form Success </title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-5">
	 <h1 class="text-center"> Thank You for contact us</h1>
	</div>
</body>
</html>

Step 7: Test Application

Hit the following URL on browser and test it:

http://localhost/demo/public/index.php/contact

Conclusion

In this Codeigniter 4 jQuery form validation tutorial, you have successfully validated form data on the client browser and server side.

Subscribe to Blog via Email