Yii2：使用表单外的按钮提交和验证表单答案

【问题标题】：Yii2: Submit and validate a form by using a button outside the formYii2：使用表单外的按钮提交和验证表单
【发布时间】：2015-01-23 02:27:37
【问题描述】：

我在使用 Yii2 使用表单外的按钮提交和验证表单时遇到问题。

这是我的情况：

我有一个表单 (myForm) 和该表单内的提交按钮 (myButton)。当我单击 myButton 时，将执行验证，如果验证失败，则不执行提交。当然，这是意料之中的，而且有效。

但是，我真正想要的是通过单击表单元素之外的 myButton 来提交 myForm。为此，我只需调用 jQuery('myForm').submit()，然后提交就可以了。

我在最后一种情况下面临的问题是验证失败但表单尚未提交，这是意料之中的。

如何提交带有表单外按钮的表单，并同时进行验证？

这是我的看法：

<?php

    $form = ActiveForm::begin([
            'validateOnSubmit' => true,
            'type' => ActiveForm::TYPE_VERTICAL,
            'options' => ['class' => 'main-task-form']
        ]);

    echo Form::widget([
            'model' => $modelData,
            'form' => $form,
            'columns' => 2,
            'attributes' => [
                'closeDate' => [
                        'type'=> 'widget',
                        'widgetClass'=> DatePicker::className(),
                        'options'=>[
                            'type' => DatePicker::TYPE_COMPONENT_APPEND,
                            'pluginOptions' => [
                                'autoclose' => true,
                                'language' => 'es',
                                'format' => 'dd-mm-yyyy',
                                'todayBtn' => 'linked',
                            ],
                        ],
                    ],
                'descriptionClose' => [
                    'type'=>'textarea', 
                    'options' => [
                        'rows' => 3,
                    ],
                ],
            ],
        ]);
?>



<?php ActiveForm::end() ?>
<!-- Form Ends Here -->


<!-- Submit Button Outside Form -->
<?= Html::button('Completar Tarea', ['class' => 'btn btn-primary btn-task-form']) ?>

这是告诉表单外的按钮触发提交的 Javascript 代码：

function assignCompleteButtonToTaskForm ()
{

    var completeButton = jQuery ('button.btn-task-form')[0];
    var mainTaskForm = jQuery ('form.main-task-form')[0];

    completeButton.onclick = function (e) {
        mainTaskForm.submit ();
    }
}

对此有什么想法吗？

另外，如何在手动执行提交之前直接触发验证过程？也许这将有助于我控制提交过程。

【问题讨论】：

标签： javascript php jquery form-submit yii2

【解决方案1】：

您也可以通过 Yii 的方式手动触发表单的验证，使用以下 javascript 代码

$('#form-id').yiiActiveForm('submitForm');

这将验证表单并在没有验证错误时返回true，否则返回false。

因此，您可以将此调用与表单提交调用结合起来以实现所需的行为。

另外，有时深入研究代码并查看内部工作情况是个好主意，您可以在yii.activeForm.js 中了解 yii 如何在前端处理其大部分活动表单内容，我相信您不会后悔的.

【讨论】：

submitForm 不提交表单。它触发“提交时”验证并返回一个布尔值以指示实际提交是否安全。
@Blizz True，感谢您的更正，我已经更新了答案。虽然不再确定它是否是解决此问题的最佳方法。
好吧，虽然submitForm函数自己被调用了好几次（不知道为什么），但是提示它起作用了，除了一些东西：如果我想显示一个确认对话框，那么确认对话框将显示两次或更多，因为有时 Yii 的 submitForm 函数返回 false，直到最后一次调用它才返回 true。请参阅以下视频：youtu.be/kyzZt-3E1J4。有什么想法吗？

【解决方案2】：

你可以通过使用 jQuery 来做到这一点。

jQuery(document).ready(function($){
   // Set Button ID or class replacing # to .  
    $("#you_button_id").on('click', function(event){
         // When you click on this button don't do any thing.
         event.preventDefault();
         // Set form ID and submit that form
         $("#your_form_id").submit();
    });
})

试试看是否可行。

【讨论】：

是的，这有效，提交按预期工作。我现在遇到的问题是，即使验证失败，提交也会继续。我认为这适用于大多数非 yii 开发人员。

【解决方案3】：

我的代码中碰巧遇到了同样的情况，我使用了其他两个答案的组合：

$(document).ready(function() {
   var $form = $('#form_id");
   $form.on('submit', function(e) {
      return $form.yiiActiveForm('submitForm');
   }); 

   $('#submit_button_id").on('click', function() { 
      $form.submit();
   });
});

你必须自己调用submitForm的原因（如果你想在提交之前再次验证）是因为默认的Yii2实现绑定了这个函数的调用来提交表单中的输入。这意味着它不会被外部触发器调用。

【讨论】：

这很奇怪，在调试这段代码时，Yii的“submitForm”调用不止一次返回false，直到最后一次调用才返回true，所以我不能使用那个函数确定是否进行实际提交。
好吧，虽然 submitForm 函数自己被调用了好几次，但它可以工作，除了：如果我想显示一个确认对话框，那么确认对话框会显示两次或更多，因为有时 Yii 的submitForm 函数返回 false，有时返回 true。观看视频：youtu.be/kyzZt-3E1J4 有什么想法吗？

【解决方案4】：

结合您之前的一些答案，我找到了解决问题的方法。现在我可以触发表单验证并按照最初的预期正确请求确认。 See the final code。感谢您的帮助。

【讨论】：