提交验证的 dijit 对话框中的 Zend 表单答案

【问题标题】：Zend form inside dijit dialog on submit validation提交验证的 dijit 对话框中的 Zend 表单
【发布时间】：2011-09-19 17:48:17
【问题描述】：

我对创建 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 表单。
将触发并显示 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 中，我也没有任何背景。

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

【问题讨论】：

有人遇到与上述相同的情况并有答案吗？请帮助..我认为这可以通过 ajax 调用并在对话框中添加错误来完成，但我不知道如何在对话框表单上添加错误/新元素。一个例子将不胜感激。谢谢

标签： forms zend-framework validation dialog dojo

【解决方案1】：

我终于解决了这个问题！见下文...我希望这对遇到同样问题的人有所帮助。如果您有更优雅的解决方案，请将您的解决方案放在这里。

在 dijit 对话框中处理表单

元素创建的验证集没有被触发并显示在表单中。

添加一个 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>

在提交表单时，通过 xhrpost 调用控制器，不要重定向到任何东西。 zend 的 formerrors 将填充错误。（我让我的控制器返回成功/失败状态）

检索zend formerrors，格式化并附加到创建的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);

单击“新版主”按钮时，我将在何处以及如何添加新元素的创建。

在您的表单中添加一个隐藏字段，该字段将包含“主持人 ID”

表格
```
$this->addElement('hidden', 'id', array('value' => 1);
```

为您的表单添加一个 preValidation 函数，该函数将在稍后提交表单时使用根据（http://www.jeremykendall.net/2009/01/19/dynamically-adding-elements-to-zend-form/）博文。

表格

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
   }
}

“新版主”按钮的 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;
}

在对发布数据执行任何操作之前提交表单时在您的控制器上

控制器

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

【讨论】：