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

发布于 2024-12-05 09:19:04 字数 3061 浏览 0 评论 0原文

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

What I need is:
  • 弹出一个对话框,其中包含 zend 表单。
  • 表单应该有验证。
  • 单击“新主持人”时,表单应创建动态文本元素。
  • 关于表单提交。

    如果验证期间发生错误,则显示错误 
         弹出对话框并让用户修复错误。 
    成功后,将用户重定向到调用弹出对话框的父页面。
    
What I have right now:
  • 我对元素创建进行验证的表单。
  • 具有声明性 dijit 对话框的视图元素,我在其中“回显” zend 形式。
  • 将触发并显示 dijit 对话框的按钮。
  • 验证表单数据并添加表单错误(如果有)的控制器。
Problem
  • 元素创建时设置的验证不会被触发并显示在表单中。
  • 单击“新主持人”按钮时,我将在何处以及如何添加新元素的创建。

这是我修剪过的代码:

Form
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'
        ));
    }
}
View
<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>
Controller
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中,我也没有任何背景。

我已经在网上搜索过但没有结果。请帮帮我。提前致谢。

I'm fairly new with creating a web application and would like to seek help regarding dojo and zend framework. I'm having problems with validation on form submission and also need to create dynamic element when a button inside the form (add new moderator button) is clicked.

What I need is:

  • A dialog that pops up which includes the zend form.
  • Form should have validation.
  • Form should create dynamic text element when "new moderator" is clicked.
  • On form submission.

    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.
    

What I have right now:

  • A form where I put validations on element creation.
  • A view element that has a declarative dijit dialog where I "echoed"
    the zend form.
  • A button that will fire and show the dijit dialog.
  • A controller that validates form data and add form errors if any.

Problem

  • Validation set on element creation is not being fired and shown in form.
  • Where and how will I add the creation of new element when the "new moderator" button is clicked.

Here are my trimmed out code:

Form

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'
        ));
    }
}

View

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

Controller

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');
    }

I've seen some post with creating a dynamic element that uses ajax but it is not using a dijit dialog box on a form and mostly are in jquery where I also don't have any background.

I've already searched on the net but to no avail. Please help me out. Thanks in advance.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

安静被遗忘 2024-12-12 09:19:04

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

在 dijit 对话框中处理表单

元素创建时设置的验证不会被触发并显示在表单中。

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

    查看

    ; form; ?>
  2. 表单提交时通过 xhrpost 调用控制器,并且不重定向到任何内容。 zend 的 formerrors 将填充错误。 (我让我的控制器返回成功/失败状态)
  3. 检索 zend formerrors,对其进行格式化并附加到创建的 div 元素。

    查看

    var xhrArgs = {url: "你的控制器操作",
           表单:dojo.byId("你的表单"),
           处理方式:“json”,
           加载:函数(数据){
                if(数据['成功']==false){
                     销毁错误列表(); //将删除之前设置的错误
                     dojo.place(formatError(数据['错误']),
                                       dojo.byId("错误"),'最后');
                }别的{
                     // 成功后重定向回页面
                     window.location = "重定向网址";
                }
           },
           错误:函数(错误){
                 控制台.log(错误);
           }
      };
      dojo.xhrPost(xhrArgs);
    

单击“新主持人”按钮时在何处以及如何添加新元素的创建。

  1. 在您的表单中添加一个隐藏字段,其中将保存“主持人 ID”

    表格

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

    表格

    public function preValidation(array $data) {
       // 使用 findFields 回调搜索 $data 动态添加的字段
       foreach ($newFields as $fieldName) {
       // 从字段名称中删除 ID 号并用它来设置新顺序
       }
    }
    
  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文本框
    
        // 增加并存储 id
        dojo.byId("id").value = parseInt(id) + 1;
    }
    
  4. 控制器

    // 表单已提交 - 通过 preValidation() 运行数据以填充新字段
    $form->preValidation($_POST);
    if($form->isValid($_POST)){//做某事}
    

I've finally solved this! see below...I hope this helps someone who will run in to the same issues. If you have a more elegant solutions just put yours here.

Handling Forms inside dijit dialog

Validation set on element creation is not being fired and shown in form.

  1. Add a div element which will hold the errors to the dijit dialog before echoing the form.

    View

    <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. On form submission call the controller via xhrpost and do not redirect to anything. The formerrors for zend will be populated with errors. (I have my controller return a success/fail status)
  3. Retrieve the zend formerrors, format it and append to the created div element.

    View

    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);
    

Where and how will I add the creation of new element when the "new moderator" button is clicked.

  1. Add a hidden field to your form which will hold the "moderator id"

    Form

    $this->addElement('hidden', 'id', array('value' => 1);
    
  2. Add a preValidation function to your form which will be used later when the form is submitted
    as per (http://www.jeremykendall.net/2009/01/19/dynamically-adding-elements-to-zend-form/) blogpost.

    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
       }
    }
    
  3. onClick action of the "new moderator" button retrieve the hidden id and dynamically create a new textbox for adding the moderator email.

    View

    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. On your controller when form is submitted before doing anything on post data

    Controller

    // Form has been submitted - run data through preValidation() to populate the new fields
    $form->preValidation($_POST);
    if($form->isValid($_POST)){//do something}
    
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文