class UsersController extends Appcontroller{
  var $name='Users';
  var $helpers = array('Form','Javascript','Html');   
  
function login() {
   $this->pageTitle = 'تسجيل الدخول';
   $this->layout = 'login'; 
   
   if (!empty($this->data)) {  
  }
}	
  }

echo $javascript->link('jquery',false); 
 echo $javascript->link('login_form',false);
echo $form->create('User', array('action' => 'login','class' => 'myform')); 
 
  echo $form->label('اسم المستخدم');
  echo $form->text('username',array('class' => 'inputWithImge')); 
  
  echo $form->label('كلمة المرور');
  echo $form->password('password',array('class' => 'inputWithImge'));

  echo $form->submit('دخــــول', array('class' => 'but'));
?>

<?php
class UsersController extends AppController {

      var $name = 'Users';
      var $helpers = array('Html','Form','Javascript');
      function add() {
	      $this->pageTitle = 'Home';    
   $this->layout = 'default';  
          if(!empty($this->data)) {
              $this->User->save($this->data);
          }
      }

      function ajax_validate() {
	      $this->pageTitle = 'Home';    
          $this->layout = 'default';  
          Configure::write('debug', 0);

          if($this->RequestHandler->isAjax()) {

              $this->data['User'][$this->params['form']['field']] = $this->params['form']['value'];

              $this->User->set($this->data);

              if($this->User->validates()) {
                  $this->autoRender = false;
              }
              else {
                 $errorArray = $this->validateErrors($this->User);

                 $this->set('error', $errorArray[$this->params['form']['field']]);
              }
          }
      }
    }

?>

<?php
    //let's load up the jQuery core
    echo $javascript->link('jquery', false);

    //and now... some file that will be specific to this view (page)
    echo $javascript->link('users_add', false);
?>

<?php echo $form->create(); ?>
<?php echo $form->input('username', array('id'=>'username')); ?>
<?php echo $form->end('Add User'); ?>

<?php
    echo $error;
?>

body{
 background-color:#8B7D6B;
}
form{
 background-color:#E0EEEE;
 margin-left:10px;
 width:150px;
}
#username{
 border:1px solid red;
}

$(document).ready( function() {

    $('#username').blur( function () {

        fieldName = $(this).attr('id');
        fieldValue = $(this).val();

        $.post('/users/ajax_validate', {
                                        field: fieldName,
                                        value: fieldValue
                                        },
               function(error) {

                   if(error.length != 0) {                

                       $('#username').after('<div class="error-message" id="'+ fieldName +'-exists">' + error + '</div>');
                   }
                   else {
                       $('#' + fieldName + '-exists').remove();
                   }
               });
     });   

});