Hello Friends,

Now let's see example of how to use jquery client side form validation in codeigniter 4. This is a short guide on codeigniter 4 if jquery client side form validation. We will use how to use jquery client side form validation using in codeigniter 4. Here you will learn how to use jquery client side form validation in codeigniter 4. We will use how to use if jquery client side form validation using codeigniter 4. Let's get started with how to jquery client side form validation use in codeigniter 4.

Here i will give you many example how you can use jquery client side form validation in codeigniter 4.

we require to download or install codeigniter project, it can install in a two ways, so first fire bellow command:

<?php
https://codeigniter.com/download
or
composer create-project codeigniter4/appstarter project_name
?>

In codeigniter 4 you have to turn on the error handling by setting up display_errors property to 1 from 0, make sure to change the values in app/Config/Boot/development.php and app/Config/Boot/production.php files.

ini_set('display_errors', '1');

In this is step to generate a database table in your application database.

CREATE TABLE files (
    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(100) NOT NULL COMMENT 'Name',
    type varchar(255) NOT NULL COMMENT 'File Type',
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='files table' AUTO_INCREMENT=1;

Open the following file, and insert database name, username and password into the file.

Path: app/Config/Database.php

public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'codeigniter_db',
    '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,
];

If you are a Mac user or anyhow getting the CodeIgniter\Database\Exceptions\DatabaseException or Unable to connect database: Codeigniter errors. Then, you can follow the given below instruction to get rid of the mentioned issues.

# ====== MAMP
public $default = [
  'hostname' => '/Applications/MAMP/tmp/mysql/mysql.sock',
]
# ====== XAMP
public $default = [ 
  'hostname' => '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock',
]

In this segment, you have to create a model file that will hold the logical structure of the contact form table. Head over to the app/Models/ folder within the path, create the new model file and name it contactFormModel.php file

Update the app/Models/contactFormModel.php file.

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

Next, get ready and create a new controller file, primarily head over to the app/Controllers directory, construct a new file, name it ContactFormController.php, then add the following code inside the app/Controllers/ContactFormController.php file.

<?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');
        }
    }
}

Let me break down how we set up the logical structure in the controller file; the index() method loads the contact form template into the view. Whereas, the form() function is handling the validation and submitting the contact form values to the server.

next to make the route for showing charts, you need to go to app/Config/Routes.php and define the given below routes in the file

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

In this step, you will create the form structure using Bootstrap 5, integrate the form with the database and validate every field of the contact form using the validate js.

Now, get into the app/Views directory, there you need to create a new view file, name it contact_form.php add the following code inside the following file.

Path : app/Views/contact_form.php

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Client Side Form Validation Tutorial Using Codeigniter 4 Example - MyWebtuts.com</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/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/jquery-validation@1.19.3/dist/jquery.validate.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/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>

Further, move to the app/Views directory again, create a new file, give it name such as thank_you.php. After that, add the given below code in app/Views/thank_you.php file.

This template is being used for showing the thank you message to the user on successful form submission, its a kind of authentication that reveals that the form has been successfully submitted.

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Client Side Form Validation Tutorial Using Codeigniter 4 Example - MyWebtuts.com</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/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>

In this last step, you have to open the terminal, type command to run the application.

php spark serve

Then next run the url in your browser.

http://localhost:8080

It will help you....