JQuery Client Side Form Validation Tutorial Using Codeigniter 4 Example
Aug 27, 2021 . Admin

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.
Step 1 : Create Codeigniter Appwe 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 ?>Step 2 : Enable Error Handling
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');Step 3 : Create Contact Form Table
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;Step 4 : Connect App To Database
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', ]Step 5 : Set Up New Model
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' ]; }Step 6 : Create Contact Form Controller
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.
Step 7 : Add Routenext 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');Step 8 : Create Form View
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>Step 9 : Run Codeigniter Project
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....