In this tutorial, we will see how to add server-side validation with custom error messages and callback to the login and registration using Codeigniter form validation class. I will create 3 forms (2 logins, 1 registration) and add validation on each of the forms.
My assumption of this tutorial is that you already installed and configured codeigniter in localhost environment. If you are facing any problem on configuring codeigniter you can follow my post how to install codeigniter in xampp.
Further I am not going to add any data in mysql database. I will make form validation only. If you want to know learn login and registration with database interaction, you can follow my below posts.
How form validation works:
- User input data into the form fields and submit.
- On server side, check for required data.
- If user input wrong data into any field then halt the form execution and display error message with issue.
- Once user submit legitimate data.
- Sanitize form data for security purpose.
- Insert into database
So you learn the basic rule. Let’s start by taking basic login form example. I will be creating a view simple_login.php
in application/views
folder.
Example 1) Basic Login Form:
Basic Login Form View:
Below is the basic bootstrap 4 login form that has POST method and will be posted on the same url. There is also validation_errors
and $this->session->flashdata('success')
which I will discuss later.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="container custom-top-margin"> <div class="row"> <div class="col-md-4 offset-md-4"><h2>Simple Login Form</h2></div> </div> <div class="row"> <div class="col-md-4 offset-md-4"> <?php echo validation_errors('<div class="alert alert-danger" role="alert">', '</div>'); if($this->session->flashdata('success')) { echo '<div class="alert alert-success" role="alert">'.$this->session->flashdata('success').'</div>'; } ?> <form action="<?php echo $_SERVER['PHP_SELF']?>" method="post"> <div class="input-group mb-3"> <input type="text" class="form-control" name="email" placeholder="Enter your Email"> </div> <div class="input-group mb-3"> <input type="password" class="form-control" name="password" placeholder="Enter your Password"> </div> <div class="input-group mb-3"> <button type="submit" class="btn btn-primary" name="submit">Submit</button> </div> </form> </div> </div> </div> |
Let’s create a Forms controller and put basic code
Forms Controller:
Below is the controller class with 2 method __construct()
and simple_login_form()
. In __construct()
method I have loaded mandatory classes and helper functions.
simple_login_form()
method will load the simple_login.php
view and form on simple_login.php
is also submit on this method.
$this->form_validation->set_rules()
will check the rules for required input fields. Rules in email fields are 'trim|required|valid_email'
which means data should first be trim and it is required and it should be valid email address.
$this->form_validation->run()
will run the validation. If validation return FALSE
then I will show same login form with error messages otherwise I will show success messages.
$this->input->post()
get post data using field name. $this->session->set_flashdata()
is used to set temporary data. In our case I will show success messages
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Forms extends CI_Controller{ function __construct() { parent::__construct(); $this->load->helper(array('form', 'url')); $this->load->library('form_validation'); $this->load->library('session'); } public function simple_login_form() { $this->form_validation->set_rules('email','Email','trim|required|valid_email'); $this->form_validation->set_rules('password','Password','trim|required'); if($this->form_validation->run() == FALSE) { $this->load->view('simple_login'); } else { $email = $this->input->post('email'); // NO XSS Filter $password = $this->input->post('password'); // NO XSS Filter //verify user from the database $this->session->set_flashdata('success', 'Thank you! your form has submitted'); $this->load->view('simple_login'); } } } |
Error Message(s):
validation_errors()
function will display all the validation errors. This function also takes opening and closing tags for any custom html styling. But you can also set styling in controller.
1 2 3 4 5 |
<?php echo validation_errors('<div class="alert alert-danger" role="alert">', '</div>'); ?> |
Success Message:
$this->session->flashdata('success')
has success message and I am checking if it is set then show it with in success div.
1 2 3 4 5 6 7 8 9 |
<?php if($this->session->flashdata('success')) { echo '<div class="alert alert-success" role="alert">'.$this->session->flashdata('success').'</div>'; } ?> |
Example 2) Advance Login Form:
Advance Login Form View:
Advance login form is just like simple login form except it has set_value()
method in email input field. Set_value()
function is retain the posted value and display the value within the text box using input name.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="container custom-top-margin"> <div class="row"> <div class="col-md-4 offset-md-4"><h2>Advance Login Form</h2></div> </div> <div class="row"> <div class="col-md-4 offset-md-4"> <?php echo validation_errors(); if($this->session->flashdata('success')) { echo '<div class="alert alert-success" role="alert">'.$this->session->flashdata('success').'</div>'; } ?> <form action="<?php echo $_SERVER['PHP_SELF']?>" method="post"> <div class="input-group mb-3"> <input type="text" class="form-control" name="email" value="<?php echo set_value('email'); ?>" placeholder="Enter your Email"> </div> <div class="input-group mb-3"> <input type="password" class="form-control" name="password" placeholder="Enter your Password"> </div> <div class="input-group mb-3"> <button type="submit" class="btn btn-primary" name="submit">Submit</button> </div> </form> </div> </div> </div> |
Forms Controller (advance_login_form) method:
advance_login_form()
method display advance login form and form will also be submitted on this function. I split form rules into an array and provide separate rules for both fields.
Email validation rules has callback function email_check
which will be checking that email must be valid gmail address. Remember callback function must have callback prefix.
$this->form_validation->set_error_delimiters()
will use to set error delimiters. In a simple login form example, I set this in the view.
I use second parameter as TRUE in $this->input->post() which means that form data must XSS clean.
email_check()
method is a callback function which will make sure that email provided by user must be valid gmail address. It also set custom message for invalid email address.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?php public function advance_login_form() { $form_rules = array( array( 'field' =>'email', 'label' =>'Email', 'rules' =>'trim|required|valid_email|callback_email_check', array( 'required' => 'Please provide email' ) ), array( 'field' => 'password', 'label' => 'Password', 'rules' => 'trim|required' ), ); $this->form_validation->set_rules($form_rules); $this->form_validation->set_error_delimiters('<div class="alert alert-danger" role="alert">', '</div>'); if($this->form_validation->run() == FALSE) { $this->load->view('advance_login'); } else { $email = $this->input->post('email', TRUE); // XSS Clean $password = $this->input->post('password', TRUE); // XSS Clean //verify user from database $this->session->set_flashdata('success', 'Thank you! your form has submitted'); $this->load->view('advance_login'); } } public function email_check($email) { $this->form_validation->set_message('email_check', 'Domain must gmail id'); return strpos($email, '@gmail.com') !== false; } |
Example 3) Registration Form:
Below is the registration form built with Bootstrap 4. It has basic registration fields with mostly all the stuff which I already mentioned in previous 2 examples.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="row"> <div class="col-md-4 offset-md-4"> <?php echo validation_errors('<div class="alert alert-danger" role="alert">', '</div>'); if($this->session->flashdata('success')) { echo '<div class="alert alert-success" role="alert">'.$this->session->flashdata('success').'</div>'; } ?> <form action="<?php echo $_SERVER['PHP_SELF']?>" method="post"> <div class="input-group mb-3"> <input type="text" class="form-control" name="first_name" value="<?php echo set_value('first_name'); ?>" placeholder="Enter your First Name"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" name="last_name" value="<?php echo set_value('last_name'); ?>" placeholder="Enter your Last Name"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" name="email" value="<?php echo set_value('email'); ?>" placeholder="Enter your Email"> </div> <div class="input-group mb-3"> <input type="password" class="form-control" name="password" placeholder="Enter your Password"> </div> <div class="input-group mb-3"> <input type="password" class="form-control" name="conf_password" placeholder="Confirm Password"> </div> <div class="input-group mb-3"> <button type="submit" class="btn btn-primary" name="submit">Submit</button> </div> </form> </div> </div> |
Forms Controller (registration_form) method:
Below code is almost the same as advance login form example. Only difference is rules for validation. In email validation I use is_unique[users.email]
, users is a database table and email is table column name which means is_unique will check the email column of users table and if email is already present in user table it through an error but remember this rule require Query Builder enable in order to work.
In the next argument I also provide custom message for is_unique which is “Email address is already registered”.
Password has min_length[8]|alpha_numeric'
rules which will be checking password should be minimum 8 digit of length and it must be in alpha numeric format.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<?php $form_rules = array( array( 'field' => 'first_name', 'label' => 'First Name', 'rules' => 'trim|required'), array( 'field' => 'last_name', 'label' => 'Last Name', 'rules' => 'trim|required'), array( 'field' =>'email', 'label' =>'Email', 'rules' =>'trim|required|valid_email|callback_email_check|is_unique[users.email]', array( 'required' => 'Please provide email', 'is_unique' => 'Email address is already registered' ) ), array( 'field' => 'password', 'label' => 'Password', 'rules' => 'trim|required|min_length[8]|alpha_numeric' ), array( 'field' => 'conf_password', 'label' => 'Confirm Password', 'rules' => 'trim|required|matches[password]' ), ); $this->form_validation->set_rules($form_rules); $this->form_validation->set_error_delimiters('<div class="alert alert-danger" role="alert">', '</div>'); if($this->form_validation->run() == FALSE) { $this->load->view('registration'); } else { $email = $this->input->post('email', TRUE); // XSS Clean $password = $this->input->post('password', TRUE); // XSS Clean //verify user from database $this->session->set_flashdata('success', 'Thank you! your form has submitted'); $this->load->view('registration'); } |
Success and error messages same as shown in above example.
So let’s wrap this is up. Now you the basic knowledge of codeigniter form validation. We have seen some basic and some advanced form validation. We also apply the different style of writing validation rules.
If you wish to know more about Codeigniter form validation you can visit https://www.codeigniter.com/userguide3/libraries/form_validation.html
Awesome post! Keep up the great work! 🙂