javascript - Yii2: Submit and validate a form by using a button outside the form - Stack Overflow

admin管理员组

文章数量:1350092

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 aplish 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 pleteButton = jQuery ('button.btn-task-form')[0];
    var mainTaskForm = jQuery ('form.main-task-form')[0];

    pleteButton.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.

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 aplish 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 pleteButton = jQuery ('button.btn-task-form')[0];
    var mainTaskForm = jQuery ('form.main-task-form')[0];

    pleteButton.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.

• javascript
• php
• jquery
• form-submit
• yii2

Share Improve this question Follow asked Jan 23, 2015 at 2:27 jonathan.vargas.crjonathan.vargas.cr 4311 gold badge11 silver badge77 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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 bine 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.

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.

I happen to have the same situation in my code and I use a bination 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.

I found a solution to my problem, bining 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.

本文标签： javascriptYii2 Submit and validate a form by using a button outside the formStack Overflow