在提交验证的dijit对话框内的Zend表单

时间:2011-09-19 17:48:17

标签: forms zend-framework validation dialog dojo

我在创建Web应用程序方面相当新,并希望寻求有关dojo和zend框架的帮助。我在表单提交上遇到验证问题,并且还需要在单击表单内的按钮(添加新的主持人按钮)时创建动态元素。

我需要的是:
  • 弹出一个包含zend表单的对话框。
  • 表格应该有验证。
  • 单击“新版主”时,表单应创建动态文本元素。
  • 表单提交。

    If an error occurs during validation show the errors on the 
         popped up dialog and let user fix the error. 
    On success redirect the user to the parent page that calls the popup dialog.
    
我现在拥有的:
  • 我在元素创建上放置验证的表单。
  • 一个视图元素,它有一个声明的dijit对话框,我在其中“回显”        zend form。
  • 将触发并显示dijit对话框的按钮。
  • 一个控制器,用于验证表单数据并添加表单错误(如果有)。
问题
  • 不会触发元素创建的验证集并以表格形式显示。
  • 点击“新主持人”按钮时,我将在何处以及如何添加新元素的创建。

以下是我修剪过的代码:

形成
class Form_Test
{
    public $processed = false;

    public function init()
    {
        parent::init();
        $this->setAttribs(array('name'=>'test'));
        $this->setAction('/myapp/new')->setMethod('

        $this->addElement('ValidationTextBox', 'topic', array(
            'label'      => 'Topic: ',
            'required' => true,
            'trim'       => true, 
            'validators'  => array("alnum"),
            'filters' => array(new Zend_Filter_StringToLower(),
        new Zend_Filter_StringTrim()
        )
        )
        );
        $this->addElement('SimpleTextArea', 'desc', array(
            'label'      => 'Description: ',
            'trim'       => true
        )
        );
        $this->addElement('ValidationTextBox', 'moderator', array(
            'label'      => 'Moderator: ',
            'required' => true,
            'trim'       => true, 
            'validators'  => array("EmailAddress"),
            'filters' => array(new Zend_Filter_StringToLower(),
        new Zend_Filter_StringTrim()
        )
        )
        );


        $this->addElement('SubmitButton', 'submit', array(
            'label' => 'Create'
        ));
    }
}
视图
<button class="myButton" type="button" onclick="dijit.byId('formDialog').show()">
    New Topic
</button> 

<div dojoType="dijit.Dialog" id="formDialog" title="Topic" style="width:500px; height:300px;">
    <?php echo $this->form; ?>
</div>
调节器
public function newAction()
    {

        $form= new Form_Test();
        $this->view->form = $form;
        $form->submit->setLabel('Create');
        $values = $form->getValues();

        if( $this->_request->isPost())
        {
            if($form->isValid($_POST)){        
                $topic = new Application_Model_Topic();
                $result = $topic->createNewTopic($_POST);
                if($result == false){
                   $form->addError($result->error);
                }
            }
        }
        $this->view->form = $form;
        // How to redirect to form if there's error?

        $this->_redirect('/myapp/index');
    }

我见过一些帖子,创建了一个使用ajax的动态元素,但它没有在表单上使用dijit对话框,而且大多数都在jquery中,我也没有任何背景。

我已经在网上搜索但无济于事。请帮帮我。提前谢谢。

1 个答案:

答案 0 :(得分:1)

我终于解决了这个问题!见下文......我希望这可以帮助那些遇到同样问题的人。如果您有更优雅的解决方案,请将您的产品放在这里。

在dijit对话框中处理表单

元素创建的验证集未被触发并以表单形式显示。

  1. 在回显表单之前,添加一个div元素,该元素将把错误保存到dijit对话框中。

    视图

    <div dojoType="dijit.Dialog" id="formDialog" title="Topic" style="width:500px height:300px;">
        <div id='form-holder' style="overflow: auto; height: 250px;">
            <div id='errors' class='errors'></div>   
            <?php echo $this->form; ?>
        </div>
    </div>
    
  2. 在表单提交上通过xhrpost调用控制器,不要重定向到任何内容。 zend的前任错误将填充错误。 (我让我的控制器返回成功/失败状态)
  3. 检索zend前缀,格式化并附加到创建的div元素。

    视图

    var xhrArgs = {url: "your controller action",
           form: dojo.byId("your form"),
           handleAs: "json",
           load: function(data) {
                if(data['success']==false){
                     destroyErrorList(); //will remove errors previously set
                     dojo.place(formatError(data['error']),
                                       dojo.byId("errors"),'last');
                }else{
                     // on success redirect back to the page
                     window.location = "redirect url";
                }
           },
           error: function(error) {
                 console.log(error);
           }
      };
      dojo.xhrPost(xhrArgs);
    
  4. 单击“新主持人”按钮时,我将在何处以及如何添加新元素的创建。

    1. 在表单中添加一个隐藏字段,其中包含“版主ID”

      表格

      $this->addElement('hidden', 'id', array('value' => 1);
      
    2. 在表单中添加preValidation函数,稍后将在提交表单时使用该函数 根据(http://www.jeremykendall.net/2009/01/19/dynamically-adding-elements-to-zend-form/)blogpost。

      表格

      public function preValidation(array $data) {
         // Search $data for dynamically added fields using findFields callback
         foreach ($newFields as $fieldName) {
         // strip the id number off of the field name and use it to set new order
         }
      }
      
    3. “新主持人”按钮的onClick操作检索隐藏ID并动态创建新文本框以添加主持人电子邮件。

      视图

      function addModeratorField() {
          var id = parseInt(dojo.byId("id").value);
          var newTextBox =  new dijit.form.TextBox({id:'moderator_'+id, name:'moderator_'+id});
          dojo.byId("moderators_holder").appendChild(newTextBox.domNode);
          dojo.parser.parse(dojo.byId('moderator_'+id));//dijitize the textbox
      
          // Increment and store id
          dojo.byId("id").value = parseInt(id) + 1;
      }
      
    4. 在提交表单之前在控制器上,然后对帖子数据执行任何操作

      控制器

      // Form has been submitted - run data through preValidation() to populate the new fields
      $form->preValidation($_POST);
      if($form->isValid($_POST)){//do something}