Render form with errors via AJAX - ajax

Question

I have an action called "myAction" that render the main page of my project. This view (page), is a 2 columns layout, where in the left side have a table with all project in the database.
In the right side i render the project resume or the new project form, as the case may be.
When the user click in "New Project" button, the form is rendered via load() jQuery function. So, when the form is validate, the project is saved and your resume is rendered in the right side of the layout (removing the form), but when the form is invalid i wish render the form with errors.
All form request are sending to newAction() method controller.
The AJAX Request is:
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
dataType: 'json',
data: $form.serialize(),
success: function(response){
var object = JSON.parse(response);
if(object.success){
$("#ProjectList").load(Routing.generate('project_my'));
fn_render_resumen(object.message);
}else{
// The form is invalid.
}
}
});
The newAction in ProjectController is:
public function newAction(Request $request){
$project = new Project();
$form = $this->createForm(new ProjectType(), $project);
if($request->isMethod('POST')){
$form->bind($request);
$response = array();
if($form->isValid()){
// Persist in the database...
$response['success'] = true;
$response['message'] = $project->getSlug();
}else{
// Here need send the form with errors to the view.
}
return new JsonResponse(json_encode($response));
}
return $this->render('aView.html.twig',Array('form' => $form->createView()));
}
So, any ideas ? Thanks !

Answer 1

First of all you don't need to json_encode data passed to JsonResponse; Just do this:
return new JsonResponse($response);
Try this:
if($form->isValid()){
// Persist in the database...
$response['success'] = true;
$response['message'] = $project->getSlug();
}else{
$formHtml = $this->container
->get('templating')
->render('aViewForm.html.twig',Array('form' => $form->createView()));
$response['success'] = false;
$response['form'] = $formHtml;
}
return new JsonResponse($response);
Where aViewForm.html.twig is a template that renders only your form. For example it could looks like this:
{{ form }}
And you will have complete HTML code (with errors). Something like this:
{"success":false,"form":"\u003Cform\u003E...\u003C\/form\u003E"}
and then you can process it in JS script.