Validation of Zend_Form(Ajax version)

14 Comments

1. Hi!

   Excellent post, i’m working in a form with similar behavior.

   i’ve a question , what is ‘AjaxContext’?

   You should submit your posts at http://www.zftutorials.com/Zend_Form.

   regards,

2. Actually I’m not sure about it.
   But according to Programmer’s Reference Guide of ZF(7.8.4.3),
   it facilitates returning responses to XmlHttpRequests.
   Please see the manual for more detail information.
   Thanks.

3. Thanks a lot!

4. Hi!
   I’m trying to use this example. It’s ok while validation has errors. I can see the error messages and etc.
   But when all fields is correct, i just can see “OK!” alert window. No data submitted in this case.
   Can you help me please? 🙂

5. Hello.
   I think it’s correct…
   Because after the client program submit the form data, it is validated by the server side program and the result is sent back to the client. If there’s no error, the client program will show the “OK” message.
   If you pointed out another problem, please comment again.
   Thank you.

6. What to do with the java code when the form is loaded by an ajax call? How do i dynamically load the script?

7. There’s some ways to load javascript dynamically.
   If you can use jquery, you can do it with the following code.
   $(‘#some-container’).html(script_html);
   If you can’t, please search another way according to your environment.
   Thank you.

8. I am in search for a nice Zend Framework integration with a total one-page ajax solution where many forms are loaded and unloaded directed by a mainmenu just like native apps. The problem is to place the javascript code in the right places.
   I have researched many options like jQuery, packaging and dynamically loading .js by dojo. I cant find nice example that describe its integration. Do you have some?

9. Thank you for your comment.
   I don’t know about a nice Zend Framework integration too.
   But I think you can create your own view helper.
   If you want to use Zend_Dojo_View_Helper_ContentPane, create your contentpane helper just replacing ‘dijit.layout.ContentPane’ with ‘dojox.layout.ContentPane’ of Zend_Dojo_View_Helper_ContentPane and change the class and function name.
   Because dojox.layout.ContentPane allows to execute scripts.
   It will be like the following.

   PHP

   class My_Dojo_View_Helper_ContentPaneWithScript extends Zend_Dojo_View_Helper_DijitContainer { protected $_dijit = 'dojox.layout.ContentPane'; protected $_module = 'dojox.layout.ContentPane'; public function contentPaneWithScript( $id = null, $content = '', array $params = array(), array $attribs = array()) { if (0 === func_num_args()) { return $this; } return $this->_createLayoutContainer( $id, $content, $params, $attribs ); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   class My_Dojo_View_Helper_ContentPaneWithScript     extends Zend_Dojo_View_Helper_DijitContainer {     protected $_dijit  = 'dojox.layout.ContentPane';     protected $_module = 'dojox.layout.ContentPane';       public function contentPaneWithScript(         $id = null, $content = '',         array $params = array(), array $attribs = array())     {         if (0 === func_num_args()) {             return $this;         }           return $this->_createLayoutContainer(             $id, $content, $params, $attribs         );     } }

   And you need to add view helper path with the following code.

   PHP

   $view()->addHelperPath('My/Dojo/View/Helper', 'My_Dojo_View_Helper');

   1	$view()->addHelperPath('My/Dojo/View/Helper', 'My_Dojo_View_Helper');

   In your view, you can use the above helper like the following.

   PHP

   echo $this->contentPaneWithScript( 'formPane', '', array('region' => 'bottom', 'href'=>'yourFormUrl'), array('style' => 'background-color: lightgray;') );

   1 2 3 4 5 6

   echo $this->contentPaneWithScript( 'formPane', '', array('region' => 'bottom', 'href'=>'yourFormUrl'), array('style' => 'background-color: lightgray;') );

   If you use layout, you need to disable it manually.

10. Thanks for the tutorial.

    I have got it going very well. But when I put in a CAPTCHA, processAjax() doesn’t validate it. Would you please tell me how to validate CAPTCHA as well?

    Ivan

11. I think it is difficult to use processAjax() in that case.
    But you can replace all form elements like the following code.
    (I’m not sure that it is practical.)

    PHP

    // in the controller public function validate2Action() { $form = $this->getProfileForm(); if ($this->getRequest()->isPost()) { if ($form->isValid($_POST)) { $this->_helper->json->sendJson(true); } } echo $form; exit; }

    1 2 3 4 5 6 7 8 9 10 11 12 13 14

    // in the controller     public function validate2Action()     {         $form = $this->getProfileForm();         if ($this->getRequest()->isPost())         {             if ($form->isValid($_POST))             {                 $this->_helper->json->sendJson(true);             }         }         echo $form;         exit;     }

    PHP

    // in the script tag // sumbit the form var formSubmit = function(e){ // prevent the form from actually submitting e.preventDefault(); // submit the form in the background dojo.xhrPost({ // url: "<?=$this->url(array('action'=>'validate'))?>/format/json", url: "<?=$this->url(array('action'=>'validate2'))?>", form: "profileForm", // handleAs: "json", handleAs: "text", handle: function(data,args){ if(typeof data == "error") { console.warn("error!",args); } else if (data == "true") { alert("OK!"); } else { var div = document.createElement("div"); div.innerHTML = data; dojo.byId("profileForm").innerHTML = div.firstChild.innerHTML; } } }); };

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

    // in the script tag // sumbit the form var formSubmit = function(e){     // prevent the form from actually submitting     e.preventDefault();     // submit the form in the background         dojo.xhrPost({ //        url: "<?=$this->url(array('action'=>'validate'))?>/format/json",         url: "<?=$this->url(array('action'=>'validate2'))?>",         form: "profileForm", //        handleAs: "json",         handleAs: "text",         handle: function(data,args){             if(typeof data == "error")             {                 console.warn("error!",args);             }             else if (data == "true")             {                 alert("OK!");             }             else             {                 var div = document.createElement("div");                 div.innerHTML = data;                 dojo.byId("profileForm").innerHTML = div.firstChild.innerHTML;             }         }     }); };

12. Hello oplabo,

    In echo to what elGringo wrote, I’m getting a hard time understanding when the form is actually processed once it’s validated. On the client side, an ‘OK’ message is displayed.
    But when does the server process the data to perform actions on it?

    In your example, the profileAction() method of the controller is only called once at the beginning, and is never called when all the fields are validated.

    Am I missing something?

13. Thanks for the tutorial. It’s great.

    Prototype people read this:

    For the people who wish to do the same thing in prototype JS, add these lines when you receive the response (the prototype AJAX request will be regular one and need no special modifications),

    var response = t.responseText.evalJSON();
    json = eval( ‘(‘ + response + ‘)’ );

    and then change all the ‘dojo.byId’ to $ . That’s it. Hope this will be useful to someone.

    Thanks,

    Sathesh

14. Hi!
    I’m trying to use this example. It’s ok while validation has errors. I can see the error messages and etc.
    But when all fields is correct, i just can see “OK!” alert window. No data submitted in this case.
    Can you help me please? 🙂