Display Zend Form Validation error in Ajax

Question

There is a Zend Registration Form. Having as input username, email, password and confirm password. Validator for email is following:

    $this->add(array(
        'name' => 'email_reg',
        'required' => true,
        'filters' => array(
            array(
                'name' => 'StripTags',
            ),
            array(
                'name' => 'StringTrim',
            ),
        ),
        'validators' => array(
            array(
            'name' => 'EmailAddress',
            'options' => array(
                'domain' => true,
                'messages' => array(
                        \Zend\Validator\EmailAddress::INVALID_FORMAT => 'Email address format is invalid'
                    ),
                ),
            ),
            array(
                'name'    => 'Db\NoRecordExists',
                'options' => array(
                    'table' => 'user',
                    'field' => 'email',
                    'adapter' =>  $sm->get ( 'Zend\Db\Adapter\Adapter' ),
                    'messages' => array(
                    NoRecordExists::ERROR_RECORD_FOUND => 'E-mail address already exists'
                    ),
                ),
            ),
        ),
    ));

There are 4 validators: Required Type, e-amil format and if there is someone with following e-mail in database. Error messages will be: - E-mail is required - Email address format is invalid - E-mail address already exists

Problem Trying to catch error messages and output using ajax. In RegisterController having following function:

public function ajaxAction()
{
    if (!$this->request->isPost()) {
        return $this->redirect()->toRoute(NULL,
            array( 'controller' => 'index'
            )
        );
    }

    $form = $this->getServiceLocator()->get('RegisterForm');
    $form->setInputFilter(new RegisterFilter($this->getServiceLocator()));  
    $post = $this->request->getPost();
    $form->setData($post);
    $response   = $this->getResponse();
    $hello = 1;
    if (!$form->isValid()){
        // email is invalid; print the reasons
        $json= $form->getMessages();
        $response->setContent(\Zend\Json\Json::encode($json));
    }
    return $response;
}

And jQuery file:

$( document ).ready(function() {
         var urlform = "register/ajax";
    $("#btnRegister").click( function() {
        $("#Register").submit( function() {
           return false;    
        });
        $.ajax({
            url: urlform,
            type: 'POST',
            dataType: 'json',
            async: true,
            data: $(".form-signin").serialize(),
            success: function (data) {
                $("#rCheck").text(data);
                console.log(data);
            },
            error: function (data) {
                $("#rCheck").text(data);
                console.log(data);
            }
        }); 
    });
});

In Console i got something like this https://imagizer.imageshack.us/v2/558x205q90/661/uC09Da.png and in div with id #rCheck getting [Object][Object].

blackbishop blackbishop · Accepted Answer · 2014-08-19T08:44:20

From the image you provided the error messages are correctly returned. The error is that you are trying to write directly an Object into your div.

You should have seached how to read an object with JavaScript. Try with this code :

success: function (data) {
            data.forEach(function(datum) {
               Object.keys(datum).forEach(function (key) {
                $('<p>'+obj[key]+'</p>').appendTo('#rCheck');
                });
            });
            console.log(data);
        },

Or you may also do that within your ajaxAction :

$messages = array();
$errors = $form->getMessages();
foreach($errors as $key=>$row)
{
    if (!empty($row) && $key != 'submit') {
        foreach($row as $keyer => $rower)
        {
            $messages[$key][] = $rower;    
        }
    }
}
if (!empty($messages)){ 
$response->setContent(\Zend\Json\Json::encode($messages));
}
return $response;

Here's is a good post on how to use Zend\Form with Ajax validation.

Hope this could help.

Display Zend Form Validation error in Ajax

1 Answers