Yii2: Внесите и подтвердите свою форму, нажав кнопку возле формы

Question

У меня возникли проблемы с отправкой и проверкой формы с помощью кнопки вне формы, используя Yii2.

Это мой случай:

У меня есть форма (Myform) и кнопку отправки (MyButton) внутри этой формы. Когда я нажимаю на myButton, выполняется проверка, и если проверка не выполняется, то подача не выполняется. Это, конечно, ожидается, и это работает.

Однако, что я действительно хочу, чтобы представить Myform, нажав на MyButton, который находится за пределами элемента формы. Чтобы это сделать, я просто вызываю 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

Я нашел решение своей проблемы, объединив некоторые из ваших предыдущих ответов. Теперь я могу запустить проверку формы и запросить подтверждение правильно, как ожидалось первоначально. See the final code. Спасибо за помощь.

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

Вы также можете вручную запустить проверку формы в Yii образом, со следующим JavaScript кода

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

Это будет проверить форму и возвращает true, если нет ошибок проверки иначе false.

Таким образом, вы можете комбинировать эти и формы отправки вызовов для достижения желаемого поведения.

Кроме того, иногда его хорошая идея погрузиться в код и посмотреть, как все работает внутри, вы можете видеть, как yii обрабатывает большую часть своей активной формы в frontend в yii.activeForm.js, я уверен, вы не пожалеете об этом.

Answer 4

Я посчастливилось иметь такую ​​же ситуацию в моем коде, и я использую комбинацию обоих других ответов:

$(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 связывает вызов этой функции, чтобы представить входные данные в форме.Это означает, что он не будет вызван для внешнего триггера.