How to display form errors in a view when an ajax form is invalid?

Question

I'm trying to submited form with Ajax method, but i get no error message and the form is not valid.

after ajax request the call of action Controller "updateRoleAction" is ok, I used selrialize in the ajax request to send data post. Whene i display this by alert all data is send. i don't understand why $editForm->isValid() stick False.

Part of AdminController.php

 public function updateRoleAction(Request $request, $id)
    {
        if ($this->container->get('request')->isXmlHttpRequest()) {

            $em = $this->getDoctrine()->getManager();

            $entity = $em->getRepository('BISSAPUserBundle:Role')->find($id);


            if (!$entity) {
                throw $this->createNotFoundException('Unable to find Topic entity.');
            }

                $editForm = $this->createEditForm($entity);
                $editForm->handleRequest($request);

            if ($editForm->isValid()) {

                    $em->persist($entity); 
                    $em->flush();

                $entities_role = $em->getRepository('BISSAPUserBundle:Role')->findAll();

                return $this->render('BISSAPAdminForumBundle:Admin:role.html.twig', array(
            'entities_role' => $entities_role, 'entity' => $entity,
                ));

            }

            return $this->render('BISSAPAdminForumBundle:Role:edit.html.twig', array(
                'entity'      => $entity,
                'edit_form'   => $editForm->createView(),
                'error_output' => "No post"
            ));
        }

    }

Ajax jquery on submit :

$(function(){

        $(document).on('submit', "#form_edit_A", function(e) {
            e.preventDefault();

            var id = $("#bissap_userbundle_role_submit").data('id');
            var scheme = "http://localhost";
            var route = scheme.concat("/bodykoncept/web/app_dev.php/admin/admin/role/").concat(id).concat("/update");

            var el = $('#td_role');

            var $this = $(this);
            alert($this.serialize());
            $.ajax({type: 'POST', dataType: 'html', data: $this.serialize(), url: route, success: function(response){
                el.html(response);

            }, error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR.status);
                console.log(textStatus);
                console.log(errorThrown);
            }});

        });
    }); 

edit.html.twig:

{% block body -%}

<form name="bissap_userbundle_role" method="post" action="/bodykoncept/web/app_dev.php/admin/admin/role/" id="form_edit_A" role="form" class="tr selected">
<div class="td col-md-1"> 
                {{ form_widget(edit_form._token) }}
                {{ edit_form.vars.value.id }}
</div>
<div class="td col-md-3"> 

                {{ form_widget(edit_form.role) }}
</div>
<div class="td col-md-3"> 

                {{ form_widget(edit_form.description) }}
</div>
<div class="td col-md-3"> 
                {{ form_widget(edit_form.groupRole) }}

</div>
<div class="td col-md-3"> 
                <button type="submit" form="form_edit_A" id="bissap_userbundle_role_submit" name="bissap_userbundle_role[submit]" class="update_class btn" data-id="2">Update</button>
</div>
</form>

<div>{{ form_errors(edit_form) }}</div>
<div>{{ error_output}}</div>


{% endblock %}

Here i try to display error message {{ form_errors(edit_form) }} from form but still empty.

Answer 1

It may be because errors are attached to their corresponding fields.

If you want the errors to be mapped at the top level form you should try to add this line in the configureOptions() method of your form type :

// src/AppBundle/Form/Type/EditForm.php

namespace AppBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolver;

class EditFormType extends AbstractType
{
    // ...

    public function configureOptions(OptionsResolver $resolver)
    {
        // ...

        $resolver->addDefault('error_bubbling', true);
    }

    // ...
}

To read more about this option see the official documentation.