Codeigniter 4 Form Validation Example Tutorial

Codeigniter 4 Form Validation Example Tutorial

Validate form in CodeIgniter 4; There are two server-side methods available to validate forms in Codeingiter, first is traditional rules and second is new Strict Rules classes.

In this tutorial, we will show you how to validate a form in a CodeIgniter 4 application and display a validation error message if there is a validation error using namespace CodeIgniter\Validation.

How to Validate Form and Show Validation Errors in CodeIgniter 4

Steps and validate form data on server side and show form validation errors messages in CodeIgniter 4 framework:

Step 1: Setup 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

To create controller and model files; Simply navigate to app/Models/ and create here one model named contactModel.php, and then add the following code to it:

<?php namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;

class ContactModel extends Model
{
    protected $table = 'contacts';

    protected $allowedFields = ['name', 'email', 'message'];
}

Next navigate to app/Controllers and create a controller name Contact.php, In this controller, create some methods like the following:

  • 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 we 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</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
 <div class="container">
    <br>
    <?= \Config\Services::validation()->listErrors(); ?>

    <div class="row">
      <div class="col-md-9">
        <form action="<?php echo base_url('public/index.php/contact/create') ?>" 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>
</body>
</html>

This below line display error messages on your web page:

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

Now we 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: Start Development server

Open to the browser and hit below given URL into it:

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

Conclusion

In this Codeigniter 4 Bootstrap form validation tutorial, We have successfully validated form data on the server-side. After successfully validate data on the server-side, we send it to users on the success page.

Recommended Codeigniter Posts

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *