CodeIgniter 4 jQuery Form Validation Example

torque-programming 0 Comments Codeigniter, CodeIgniter 4 jQuery Form Validation Example, How to Validate Form in Codeigniter 4 using jQuery, jQuery 9 min read

Codeigniter tutorial, we will show you how to use the jQuery library to validate form data on the client-side in your CodeIgniter 4 application. We will also show you how to use the built-in validation library of CodeIgniter 4 to validate form data on the server-side.

Validating form data on both the client-side and server-side is important for ensuring data integrity and preventing errors or security issues. By validating data on the client-side using jQuery, you can provide instant feedback to users and prevent unnecessary server requests. And by validating data on the server-side using CodeIgniter 4’s validation library, you can ensure that the data is safe and meets any business rules or constraints.

This tutorial will guide you through the process of creating a bootstrap form and adding jQuery validation to it. We will also show you how to use CodeIgniter 4’s validation library to validate the form data on the server-side. By the end of this tutorial, you will have a solid understanding of how to validate form data using jQuery and CodeIgniter 4, allowing you to build more robust and secure web applications.

How to Validate Form in Codeigniter 4 using jQuery

Contents

Download Codeigniter Latest
Basic Configurations
Create Database With Table
Setup Database Credentials
Create Model and Controller
Create Views
Start Development server

Download Codeigniter Latest

To get started with CodeIgniter 4, the first step is to download the latest version of the framework. You can download the framework from the official CodeIgniter website at https://codeigniter.com/download.

Once you have downloaded the CodeIgniter 4 setup, unzip the archive and save it in your local system. You can save it in the XAMPP/htdocs/ directory if you are using XAMPP as your local development environment.

After unzipping the CodeIgniter 4 setup, you will see a folder with the name “CodeIgniter4-x.x.x” (x.x.x represents the version number). It is recommended to rename this folder to something more meaningful, like the name of your project. In this example, we will rename the folder to “demo”.

Renaming the folder will make it easier for you to identify your project and keep your files organized. It will also help you to avoid conflicts with other CodeIgniter 4 projects that you may have on your system.

In summary, to get started with CodeIgniter 4, you need to download the latest version of the framework from the official website, unzip the setup, and rename the folder to something meaningful. Once you have completed these steps, you can start building your application using CodeIgniter 4.

Basic Configurations

Now, we need to configure some basic settings in the “app/config/app.php” file. To do this, we will open the “config.php” file located in the “application/config” folder using a text editor.

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';

Create Database With Table

Now, we need to create a database for our CodeIgniter 4 application. To do this, we will use PHPMyAdmin, which is a popular web-based database management tool.

To get started, open PHPMyAdmin and create a new database with the name “demo”. You can do this by selecting the “New” button from the left-hand menu and then entering the name “demo” in the appropriate field.

After you have created the database, you can use SQL queries to create tables and insert data. For example, if you want to create a table to store user registration data, you can use the following SQL query:

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;

Setup Database Credentials

Now, we need to connect our CodeIgniter 4 project to the database. To do this, we will open the “database.php” file located in the “app/Config” folder using a text editor.

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,
];

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.

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

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 Form Validation Example - Torque Programming</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>

This below line display error messages on your web page:

<?= \Config\Services::validation()->listErrors(); ?>

You need to add jQuery validation library given below in contact form:

<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>

When you include the jQuery validation library on contact us web page. After this, you will also have to write validation rules of jQuery on the contact page. Which are given below:

<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>

Note:- And here jQuery validation rules and messages are written. You can also change these validation rules and error messages as per your requirements.

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 - Torque Programming</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>

Start Development server

For start development server, Go to the browser and hit below the URL.

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 using the jQuery validation library. and also validate form data on the server-side.

You May Also Like

How to Validate Form in Codeigniter 4 using jQuery

Recommended Post

Leave a Reply Cancel reply

Read Next