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

Question

我在使用 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 ();
    }
}

对此有什么想法吗？

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

Answer 1

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

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

true如果没有验证错误，这将验证表单并返回false。

所以你可以结合这个和表单提交调用来实现所需的行为。

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