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如何處理其大多數活動表單內容，我確定您不會后悔。

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

通過結合您以前的一些答案，我找到了解決問題的方法。 現在，我能夠觸發表單驗證並正確地按照最初的期望請求確認。 請參閱最終代碼 。 謝謝您的幫助。