[英]Yii2: Submit and validate a form by using a button outside the form
使用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 ();
}
}
有什么想法吗?
另外,如何在手动执行提交之前直接触发验证过程? 也许这将有助于我控制提交过程。
您还可以使用以下javascript代码以Yii方式手动触发表单的验证
$('#form-id').yiiActiveForm('submitForm');
这将验证表单,如果没有验证错误,则返回true
,否则返回false
。
因此,您可以将其与表单提交调用结合起来以实现所需的行为。
另外,有时候深入研究代码并查看内部工作情况是一个好主意,您可以在yii.activeForm.js的前端中看到yii如何处理其大多数活动表单内容,我确定您不会后悔。
好吧,您只需使用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();
});
})
尝试是否可行。
我的代码中碰巧遇到相同的情况,我同时使用了其他两个答案:
$(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实现将此函数的调用绑定为在表单内提交输入。 这意味着不会为外部触发器调用它。
通过结合您以前的一些答案,我找到了解决问题的方法。 现在,我能够触发表单验证并正确地按照最初的期望请求确认。 请参阅最终代码 。 谢谢您的帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.