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

Question

I'm having a problem when submitting and validating a form by using a button outside the form, using Yii2.

This is my case:

I have a form ( myForm ) and a submit button ( myButton ) inside of that form. When I click the myButton the validation is performed and if validation fails, then the submit is not performed. This is expected, of course, and it works.

However, What I really want is to submit myForm by clicking on myButton which is outside the form element. To acomplish this I simply call jQuery('myForm').submit(), and the submit works.

The problem I face with this last scenario, is that the validation fails but the form is yet submitted, which is not expected.

How can I submit a form with a button outside the form, and make the validation work too?

This is my view:

<?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']) ?>

And this is the Javascript code to tell the button outside the form, to trigger the submit:

function assignCompleteButtonToTaskForm ()
{

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

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

Any idea about this?

Also, how can I trigger directly the validation process before perform the submit manually? Maybe that will help me to control the submit process.

Answer 1

You can also manually trigger the validation of the form in Yii way, with following javascript code

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

This will validate the form and returns true if there are no validation errors otherwise false .

So you can combine this and form submit calls to achieve desired behaviour.

Also, sometimes its good idea to dive into the code and see how things are working internally, you can see how yii is handling most of its active form stuff in frontend in yii.activeForm.js , Im sure you won't regret it.

Answer 2

Well you can just do it by using 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();
    });
})

try if it works.

Answer 3

I happen to have the same situation in my code and I use a combination of both other answers:

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

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

The reason you have to call submitForm yourself (if you want to validate once more before submit) is because the default Yii2 implementation binds the call of this function to submit inputs within the form. This means it won't be called for an external trigger.

Answer 4

I found a solution to my problem, combining some of your previous answers. Now I'm able to trigger form validation and request a confirmation correctly as expected initially. See the final code . Thanks for the help.