ZF2 - validation within a bootstrap modal

Question

I am using twitter bootstrap in a zf2 application. A bootstrap modal displays a form containing user details, which i would like to be edited and saved. This is fairly trivial if i just submit form in the dialog and reload the whole page, but i am looking for a way to validate the form without it being submitted, and ideally if the data is valid, for it to pass the new data back to the page when the modal dialog is closed.

How can i do this - would it need to be an ajax call? If so how would i structure that in my controller to return the form validation in a way that the errors can be rendered in the modal?

Edit 1: Accepted answer below is spot on so far.

The only thing i'm having trouble understanding is how to pass the validation data from the controller back to the bootstrap modal.

So as a simple workflow - modal window opens loaded with an edit form bound to a User model, which shows the User data to be edited (all preloaded and assigned to the view already). The modal form is submitted, jquery hooks onto the form submit and sends the data as an ajax request to UserController::EditUserAction - where the form data is validated against the models inputfilter. If it turns out to be valid, the data is saved and the modal dialog is closed. If the data is invalid, say changing the email address to an address that already exists, the action returns a JsonModel with the form error(s) - how is this then passed to the bootstrap modal to highlight the field that produced the error, like the way that ZF does automatically when a form is typically submitted?

Answer 1

if you want try for validation before submit form (send data to server) . may be better use client side validation .

http://www.rayfaddis.com/blog/2013/05/27/jquery-validation-with-twitter-bootstrap

Answer 2

You would do this with ajax. To understand what to do in your controller you have to understand the fundementals of an ajax call. jQuery makes this pretty easy.

<script>
$(function() {
  jQuery.ajax({
    type: method,
    dataType: 'json',
    url: url,
    data: data,
    error: function(jqXHR, textStatus, errorThrown) {
      // Do something to handle the error
    },
    success: function(data, textStatus, jqXHR) {
      // Do something else on successful validation
    }
  });
});
</script>

The type is the HTTP method (eg. 'POST'). The url is the the route to get you to the controller which will give you a response. The data is the form data to be sent. More documentation is at https://api.jquery.com/jQuery.ajax/

The success function is executed if the HTTP response code is in the 200's. If you send an HTTP response code in the 400's or 500's, the javascript in the error function will be executed. This can be used to show an error in your modal dialog.

You can modify the HTTP response code in a controller by using the following code:

$this->getResponse()->setStatusCode(400);

where 400 is the HTTP response code (see http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html for more info about HTTP response codes)

Then, to send data back with the response, return a JsonModel in the controller instead of a ViewModel

return new JsonModel($array);

where $array is the data you want to send back to the browser.

If you end up doing this a lot, you might investigate the zf2 class \Zend\Mvc\Controller\AbstractRestfulController.