How to Check Availability of the Username or Email using Codeigniter and Bootstrap Validator

Today I’m going to do a small tutorial based on Bootstrap Validator and Codeigniter. It’s a kind of validation tutorial for username or email that we see always when we register in web sites. I think you have seen a real time validation for a entered username or email is included in many online registration forms. The most used technology is Bootstrap Validator (Remote) used. Bootstrap Validator is used for real time tasks in web design, without reloading the web page. Here I’m not going to create a whole form and submit data. What I will be doing is just explain how to check a username or email whether it is already available in a database or not. You may also like How to jquery validation remote (ajax) using Codeigniter and How to Check Availability of the Username and Email using Codeigniter.

Steps For How to Check Availability of the Username or Email using Codeigniter and Bootstrap Validator.

Step 1. Create View

In this step we have create new view file like.

public function Register()
{
    $this->load->view('register');
}

In above view load inside application/views/register.php

<form action="" class="form-horizontal" id="register_user" method="post" enctype="multipart/form-data">
    <div class="col-md-6">
        <div class="form-group">
            <div class="col-md-12">
                <span style="color: #ffffff;">First Name <span style="color: #999999;">*</span></span>
                <input type="text"  style="margin-top: 5px;" class="form-control" value=" required="" name="first_name" placeholder="First Name" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-12">
                <span style="color: #ffffff;">Last Name <span style="color: #999999;">*</span></span>
                <input type="text"  style="margin-top: 5px;" class="form-control" value="" required="" name="last_name" placeholder="Last Name" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-12">
                <span style="color: #ffffff;">Email <span style="color: #999999;">*</span></span>
                <input type="email" id="email" style="margin-top: 5px;" class="form-control" value="" required="" name="email" placeholder="Email" />
                
            </div>
        </div>

        <div class="form-group" style="float: right;">
            <div class="col-md-12">
                <button class="btn btn-info">Register</button>
            </div>
        </div>
    </div>
</form>

Step 2. Connect To Bootstrap Validator Plugin

In this step we have create Bootstrap Validator Plugin to set this code inside hrml header.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>

Step 3. Create jQuery or JavaScript Code

In this step we have call controller and check email like url: ‘<?=base_url()?>Login/CheckEmail’,

<script type="text/javascript">
    $(document).ready(function() {
        $('#register_user').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
              
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The driver email is required and cannot be empty'
                        },
                        remote: {
                            url: '<?=base_url()?>Login/CheckEmail',
                            data: function(validator) {
                                return {
                                    email: validator.getFieldElements('email').val()
                                };
                            },
                            message: 'The email address is not available'
                        },
                    }
                },
                
            }
        });
    });
</script>

Step 4. Remote Call in Controller

In below code to check email in database and in this email record found in database json response false otherwise record not found json response true.

public function CheckEmail()
{
    $this->db->select('*');
    $this->db->from('users');
    $this->db->where('email',$this->input->post('email'));
    $count = $this->db->get()->num_rows();

    if($count == 0)
    {
        $json['valid'] = true;
    }
    else
    {
        $json['valid'] = false;
    }
    echo json_encode($json);
}

And if you like this tutorials please share it with your friends via Email or Social Media.