Check username availability using jquery in cakephp

Check username availability using jquery in cakephp

Click To View Complete Tutorial



When i was working on a project of mine then i was stuck for checking username availability using ajax (jquery) then i tried a lot and after all i got a way around. In this post i will tell you about that how to check whether a user already exists or not with provided username.

I have wrote complete code below:

Code for your view file.

This code is to be placed in your views file:

  • Html Code 
    1.             <label>Username</label>
            <?php echo $this->Form->input('username',array('label'=>false,
            'div'=>false,'type'=>'text',
            'id'=>'name',
            'class'=>'username',
            'value'=>'Username'));
            ?>
            <div id="username_feedback"></div>
  • Css Code
  1. <style>
    #username_feedback{
            margin-left: 30px;
            margin-top: 5px;
        color: #FD868E;
        font-size: 11px;
        font-style: italic;
            border: 1px solid #fff;
        -moz-border-radius: 1em 0em 1em 0em;
            display: none;
        -khtml-border-radius: 1em 0em 1em 0em;
        -webkit-border-radius: 1em 0em 1em 0em;
        border-radius: 1em;
        background-color: #E1E0DD;
        padding: 3px;
        padding-left: 15px;
        padding-right: 15px;
      }
    </style>

















                                                                                                             
  • Javascript Code                                                                                               

  1. <script type="text/javascript">
    $(document).ready(function(){
            $('#name').focus(function(){
                $('#username_feedback').hide();
            });
            $('#name').blur(function(){
    //Below post function is using check_username method of users controller.            
           $.post('/users/check_username',{username:$('#name').val()},function(result){
            $('#username_feedback').html(result).show('1000');
           });
        });
    });
    </script>











    Above html + javascript code must be placed in view file;

    But Css code is optional either you put it in view file or place it in any stylesheet;

Code for Controller.

here i suppose that you have controller named users. you just put below code in your users controller file. If you have controller with any other name (not users) then just change above javascript code (replace users with your controller name).


  1. function check_username()
    {
        $this->autoRender=false;
    if(mb_strlen($username)===0){
            echo "Choose a username";
            }
    else if(mb_strlen($username)&lt;5){
            echo "Too Short Username!";
            }
    else{
        if($this->RequestHandler->isAjax()) {
         mb_internal_encoding("UTF-8");
         $username=trim($this->params['form']['username']);
         $conditions = array("User.username" =>$username);
         //either you use cake's query method or find method....
         //using find method...
         $query=$this->User->find('first', array('conditions' => $conditions));
         //using query method...
         $query=$this->User->query("SELECT username FROM users
                                    WHERE username= 'mysql_real_escape_string($username)'");
           if(mb_strlen($query)!==0){
            echo "Username Taken!";
            }
          else{
           echo "You Entered Correctly!";
            }
          }
        }
    }
































Final Words

I gave you complete code. Hope you can workout, even if some problem occurs you can contact me at kaswan@outlook.com