CakePHP 2.1 Ajax validation errors

Question

I'm trying to get validation errors with Ajax and jQuery working in CakePHP 2.1 for a contact form. On blur of the name field a js function is called:

$(document).ready(function(){

$('#name').blur(function(){
    $.post(
        '/Cake_ajax/Contacts/validate_form',
        { field: $(this).attr('id'), value: $(this).val() },
        handleNameValidation
    );
});

function handleNameValidation(error){
    if(error.length > 0){
        if($('#name-notEmpty').length == 0){
            $('#name').after($('<div id="name-notEmpty" class="error-message">' + error + '</div>'));
        }
    }else{
        $('#name-notEmpty').remove();
    }
}
});

The javascript calls the validate_form function in my controller:

public function validate_form(){
        if($this->RequestHandler->isAjax()){
            $this->request->data['Contact'][$this->request->params['form']['field']] = $this->request->params['form']['value'];
            $this->Contact->set($this->request->data);
            if($this->Contact->validates()){
                $this->autorender = FALSE; // don't render a view
            }else{
                $error = $this->validateErrors($this->Contact);
                $this->set('error', $error[$this->request->params['form']['field']]);
            }
        }
    }

In my view I'm getting a couple of errors when the error is called:

Undefined index: form [APP\Controller\ContactsController.php
Undefined index: form [APP\Controller\ContactsController.php

I'm at my wits end, and I'm fairly new to CakePHP. Any help would be greatly appreciated.

Answer 1

In your controller you should have something like below. Cake 2.0 replaces many features in RequestHandlerComponent and Controller. It also replaces $this->params array in all places and the old $this->data to $this->request->data, something like that. You can visit the migration guide.

    public function validate_form(){
        if($this->RequestHandler->isAjax()){
           $this->request->data['Contact'][$this->request['form']['field']] = $this->request['form']['value'];
           $this->Contact->set($this->request->data);
           if($this->Contact->validates()){
              $this->autorender = FALSE; // don't render a view
           }else{
             $error = $this->validateErrors($this->Contact);
             // didn't validate logic
             $this->set('error',$this->Contact->validationErrors[$this->request['data']['field']][0]);
          }
       }
    }

Answer 2

Try $this->request->params['field'] instead of $this->request->params['form']['field'].

Or right after you check to isAjax(), try doing a var_dump on $this->request->params. From the error you are getting, the form index does not exist in $this->request->params.

Answer 3

If you want to simulate a POST like done when using a standard form and the Cake FormHelper, you could also simply name the posted parameters the same way the FormHelper names the input fields.

$j.post(
    '/Cake_ajax/Contacts/validate_form',
    { "data[Contact][" + $(this).attr('id') + "]": $(this).val() },
    handleNameValidation
);

This would automatically populate $this->request->data['Contact']['name'] and you could just comment this line:

//$this->request->data['Contact'][$this->request->params['form']['field']] = $this->request->params['form']['value'];