Javascript Yii2：使用表单外的按钮提交和验证表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28102106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Yii2: Submit and validate a form by using a button outside the form
提问by jonathan.vargas.cr
I'm having a problem when submitting and validating a form by using a button outside the form, using Yii2.
我在使用 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.
我在该表单中有一个表单 ( myForm) 和一个提交按钮 ( myButton)。当我单击 myButton 时，将执行验证，如果验证失败，则不执行提交。当然，这是意料之中的，并且它有效。
However, What I really want is to submit myFormby clicking on myButtonwhich is outside the form element. To acomplish this I simply call jQuery('myForm').submit(), and the submit works.
但是，我真正想要的是通过单击表单元素之外的myButton来提交myForm。要完成此操作，我只需调用 jQuery('myForm').submit()，然后提交即可。
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:
这是告诉表单外的按钮触发提交的 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 ();
}
}
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.
另外，如何在手动执行提交之前直接触发验证过程？也许这会帮助我控制提交过程。
回答by Tahir
You can also manually trigger the validation of the form in Yii way, with following javascript code
您也可以通过以下javascript代码手动触发Yii方式的表单验证
$('#form-id').yiiActiveForm('submitForm');
This will validate the form and returns trueif there are no validation errors otherwise false.
true如果没有验证错误，这将验证表单并返回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.
此外，有时深入代码并查看内部如何工作是个好主意，您可以在yii.activeForm.js中查看 yii如何在前端处理其大部分活动表单内容，我相信您不会后悔的。
回答by Blizz
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 submitFormyourself (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.
你必须调用submitForm自己的原因（如果你想在提交之前再次验证）是因为默认的 Yii2 实现绑定了这个函数的调用来提交表单内的输入。这意味着它不会被外部触发器调用。
回答by jonathan.vargas.cr
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.
我找到了解决我的问题的方法，结合了您之前的一些答案。现在，我可以按预期触发表单验证并正确请求确认。查看最终代码。谢谢您的帮助。
回答by Touqeer Shafi
Well you can just do it by using jQuery.
那么你可以通过使用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.
试试看是否有效。
