Question

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

这是我的情况：

我在该表单中有一个表单（ myForm ）和一个提交按钮（ myButton ）。当我单击myButton时，将执行验证，如果验证失败，则不执行提交。当然，这是可以预期的，并且有效。

但是，我真正想要的是通过点击表单元素之外的 myButton 来提交 myForm 。为了实现这一点，我只需调用jQuery（＆＃39; myForm＆＃39;）。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如何处理yii.activeForm.js中前端的大多数活动表单内容，我相信你赢了＆＃39对此感到遗憾。

Answer 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();
    });
})

尝试它是否有效。

Answer 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实现绑定了这个函数的调用以在表单中提交输入。这意味着它不会被调用外部触发器。

Answer 4

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

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

4 个答案: