Show all model validation errors on top of the page in cakePHP

Question

I am new to CakePHP. When I am using Model Field Validations then it is showing error message infront of each required form field. I want to show it in a div at the top of the form. How I can implement it. Thanks in advance. Here is my Code: Model:

<?php
class User extends AppModel {
public $validate = array(
    'username' => array(
        'required' => array(
            'rule' => array('notEmpty'),
            'message' => 'A username is required'
        ),
     array(
    'rule'    => array('minLength', 8),
    'message' => 'Username must be at least 6 characters long'
     )
    ),
    'password' => array(
        'required' => array(
            'rule' => array('notEmpty'),
            'message' => 'A password is required'
        )
    ),
     'city' => array(
        'required' => array(
            'rule' => array('notEmpty'),
            'message' => 'A City is required'
        )
    ),
     'state' => array(
        'required' => array(
            'rule' => array('notEmpty'),
            'message' => 'A State is required'
        )
    ),
    'role' => array(
        'valid' => array(
            'rule' => array('inList', array('admin', 'author')),
            'message' => 'Please enter a valid role',
            'allowEmpty' => false
        )
    )
);

}

UsersController.php

public function add() {
    $this->set('states_options', $this->State->find('list', array('fields' =>array('id','name') )));
        $this->set('cities_options', array());
    if ($this->request->is('post')) {
        $this->User->set($this->request->data);
        if($this->User->validates())
        {
        $this->User->create();
        if ($this->User->save($this->request->data)) {
            $this->Session->setFlash(__('The user has been saved'));
            $this->redirect(array('action' => 'index'));
        } else {
            $this->Session->setFlash(__('The user could not be saved. Please, try again.'));
        }
     }
     else {
        $errors = $this->User->validationErrors;
            $this->set('ValidateAjay',$errors);             
        //pr($errors);die;
        }
    }
}

User View:

<!--<script src="http://code.jquery.com/jquery-1.7.2.js"></script>-->
<script>
$(document).ready(function(){
$('#UserState').change(function(){
  var stateid=$(this).val();
  $.ajax({
  type: "POST",
  url: "checkcity",
  data:'stateid='+stateid+'&part=checkcity',
  success: function(data) {
  $("#city_div").html(data);
  }
  });
});
});
</script>
<div class="users form">
<?php
 if(!empty($ValidateAjay)){
 pr($ValidateAjay);
 }
 echo $this->Form->create('User'); ?>
 <fieldset>
    <legend><?php echo __('Add User'); ?></legend>
<?php
    echo $this->Form->input('username');
    echo $this->Form->input('password');
    echo $this->Form->input('state', array('options' => $states_options , 'empty' => 'Select State'  ));    
    ?>
   <div id="city_div">
   <?php
    echo $this->Form->input('city', array('options' => $cities_options, 'empty' => 'Select City' ));
    ?>
    </div>
   <?php
    echo $this->Form->input('role', array(
        'options' => array('admin' => 'Admin', 'author' => 'Author')
    ));
?>
</fieldset>
<?php echo $this->Form->end(__('Submit')); ?>
 </div>

Solution 1

You can get all validation errors from the $this->validationErrors variable on the view. Then feel free to iterate through them and display as you like. They will be organized by model, like so:

array(
  'User' => array(
    'username' => 'This field cannot be empty.',
    'password' => 'This field cannot be empty.'
  )
);

Then you can iterate through them on the view and display them as such. This example displays them as an unordered list:

$errors = '';
foreach ($this->validationErrors['User'] as $validationError) {
  $errors .= $this->Html->tag('li', $validationError);
}
echo $this->Html->tag('ul', $errors);

Lastly, you can hide the form helper's automatic error messages by hiding them with CSS or setting the FormHelper defaults to not show them.

CSS

.input.error {
  display: none;
}

or

in the view

$this->Form->inputDefaults(array(
  'error' => false
));

Solution 2

jeremyharris example makes a lot of sense, however if you don't want to manually set loop for every form field, you can try this:

$errors = '';
foreach($this->validationErrors as $assoc) {
    foreach ($assoc as $k => $v) {
        $errors .= $this->Html->tag('li', $v);  
    }
}
echo $this->Html->tag('ul', $errors);

So if your validation returns multiple errors, the output will looks like this:

 - A username is required
 - A password is required