Question

我在Yii2中有一个表单，并且已经使用引导标签组织了该表单。

我面临的问题就像在活动选项卡中，所有字段都已填充，而其他选项卡中的某些字段为空，这是必需的。当我单击保存时，它只是停留在导航到其他选项卡中未填写某些必填字段的地方。好尴尬如何在顶部显示一些未填写必填字段的消息。

这是我的表单代码。

<?php
use yii\bootstrap\ActiveForm;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use app\models\State;
use kartik\depdrop\DepDrop;
use wbraganca\dynamicform\DynamicFormWidget;
/* @var $this yii\web\View */
/* @var $model app\models\User */
/* @var $form yii\widgets\ActiveForm */
?>

<?php 

$this->registerJsFile("@web/views/site/js/jquery.geocomplete.js",[
    'depends' => [
        \yii\web\JqueryAsset::className()
    ]
]);

$catList=ArrayHelper::map(app\models\State::find()->all(), 'id', 'state_name' );  

?>
<div class="row">
    <div class="col-md-10 col-lg-offset-1">

        <?php $form = ActiveForm::begin(['id' => 'dynamic-form', 'layout' => 'horizontal', 'enableClientValidation' => true, 'enableAjaxValidation' => true]);?>
  <div class="panel panel-default">
      <div class="panel-body nav-tabs-animate nav-tabs-horizontal">
      <ul class="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
          <li class="active" role="presentation"><a data-toggle="tab" href="#profile" aria-controls="profile" role="tab">
          <?=Yii::t('app', 'Profile');?>
        </a></li>

        <li role="presentation"><a data-toggle="tab" href="#user_kids" aria-controls="user_kids" role="tab">
          <?=Yii::t('app', 'User Kids');?>
        </a></li>
        <li role="presentation" class="pull-right">
          <div class="form-group">
           <?=Html::submitButton('Save', ['class' => 'btn btn-primary'])?>
          </div>
        </li>
      </ul>
           <div class="tab-content"> <br clear="all">
               <div class="tab-pane active animation-slide-left" id="profile" role="tabpanel">
        <?php // $form = ActiveForm::begin(['id' => 'my_form', 'layout' => 'horizontal']);?>                   
        <div class="form-group form-material col-lg-6">
            <?=$form->field($model, 'first_name')->textInput(['placeholder' => 'First Name'])?>
        </div>
        <div class="form-group form-material col-lg-6">
            <?=$form->field($model, 'last_name')->textInput(['placeholder' => 'Last Name'])?>
        </div>        
        <div class="form-group form-material col-lg-6">
            <?=$form->field($model, 'phone')->textInput(['placeholder' => 'Mobile'])?>
        </div>
        <div class="form-group form-material col-lg-6">
            <?=$form->field($model, 'email')->input('email', ['placeholder' => 'Email', 'readonly' => true])?>
        </div>        
        <div class="form-group form-material col-lg-6">
            <?= $form->field($profile, 'street1')->input('street1', ['placeholder' => 'Address Street1'])?>
        </div>
        <div class="form-group form-material col-lg-6">
            <?= $form->field($profile, 'street2')->input('street1', ['placeholder' => 'Address Street2'])?>
        </div>
        <div class="form-group form-material col-lg-6">
            <?= $form->field($profile, 'state')->dropDownList($catList, ['id'=>'state_name']) ?>

        </div>

        <div class="form-group form-material col-lg-6">
           <?=  $form->field($profile, 'city')->input('city', ['placeholder' => 'City'])
           /*
           echo $form->field($profile, 'city')->widget(DepDrop::classname(), [
            'data'=>ArrayHelper::map(\app\models\City::find()->all(), 'id', 'city_name' ),

            'pluginOptions'=>[
            'depends'=>['state_name'], // the id for cat attribute
            'placeholder'=>'Select...',
            'url'=>  \yii\helpers\Url::to(['subcat'])
            ]
            ]);
          */
              ?>
        </div>
        <div class="form-group form-material col-lg-6">
            <?= $form->field($profile, 'zipcode')->input('zipcode', ['placeholder' => 'Zip code'])?>
        </div>        
        <div class="form-group form-material col-lg-12" style="text-align: center"><h3>Billing Address</h3></div>

        <div class="form-group form-material col-lg-6">
            <?= $form->field($billinginfo, 'street1')->textInput(['maxlength' => true, 'data-geo' => 'street1', 'class' => 'form-control geocomplete'])?>
        </div>
         <div class="form-group form-material col-lg-6">
            <?= $form->field($billinginfo, 'street2')->textInput(['maxlength' => true, 'data-geo' => 'street2', 'class' => 'form-control geocomplete'])?>
        </div> 
        <div class="form-group form-material col-lg-6">
            <?=$form->field($billinginfo, 'city')->textInput(['maxlength' => true, 'data-geo' => "administrative_area_level_2", 'class' => 'form-control geocomplete'])?>
        </div>        
         <div class="form-group form-material col-lg-6">
            <?=$form->field($billinginfo, 'state')->textInput(['maxlength' => true, 'data-geo' => "administrative_area_level_1", 'class' => 'form-control geocomplete'])?>
        </div>        
         <div class="form-group form-material col-lg-6">
            <?= $form->field($billinginfo, 'zipcode')->textInput(['maxlength' => true, 'data-geo' => 'postal_code', 'class' => 'form-control geocomplete'])?>
        </div>     
            </div>

<?php
if (!$model->isNewRecord) {
    ?>
        <div class="tab-pane animation-slide-left" id="user_kids" role="tabpanel">
          <?php DynamicFormWidget::begin([
        'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
        'widgetBody' => '.container-items', // required: css class selector
        'widgetItem' => '.item', // required: css class
        'limit' => 4, // the maximum times, an element can be cloned (default 999)
        'min' => 1, // 0 or 1 (default 1)
        'insertButton' => '.add-item', // css class
        'deleteButton' => '.remove-item', // css class
        'model' => $modelsKids[0],
        'formId' => 'dynamic-form',
        'formFields' => [
            'id',
            'child_name',
            'child_birth_date',
                        'child_gender',
        ],
    ]);?>

 <div class="container-items"><!-- widgetContainer -->
          <?php foreach ($modelsKids as $i => $modelsKid): ?>
          <div class="item panel panel-success" ><!-- widgetBody -->
          <div class="panel-heading">
            <h3 class="panel-title pull-left">Kids:  <?=($i + 1)?></h3>
            <div class="pull-right">
              <button type="button" class="add-item btn btn-sm btn-icon btn-success btn-round waves-effect waves-light waves-round" style="margin-left:-20px;margin-top:5px;"><i class="glyphicon glyphicon-plus"></i></button>
              <button type="button" class="remove-item btn btn-sm btn-icon btn-danger btn-round waves-effect waves-light waves-round" style="margin-right:10px;;margin-top:5px;"><i class="glyphicon glyphicon-minus"></i></button>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="panel-body">

        <?php
// necessary for update action.
    if (!$modelsKid->isNewRecord) {
        echo Html::activeHiddenInput($modelsKid, "[{$i}]id");
    }
    ?>
            <div>
              <div class="row userkids" id="userkids<?=$i?>">
                <div class="col-md-6">
                  <div class="form-group form-material">
                    <?php
if ($modelsKid->isNewRecord) {
        $modelsKid->child_name = '';
        $modelsKid->child_birth_date = '';
                $modelsKid->child_gender = '';

    }?>
                    <?=$form->field($modelsKid, "[{$i}]child_name")->input('text')?>

                  </div>
                  <br>
                  <div class="form-material end_time">
                    <?=$form->field($modelsKid, "[{$i}]child_birth_date")->input('date')?>
                  </div>
                   <?=$form->field($modelsKid, "[{$i}]child_gender")->dropDownList(['Male' =>'Male','Female'=>'Female'])?>

                </div>
              </div>
            </div>
          </div>
        </div>
        <?php endforeach;?>
      </div>

      <?php DynamicFormWidget::end();?>

                </div>
                <!-- end user_kids tab -->
    <?php
}
?>
<?php ActiveForm::end();?>      
    </div>
</div>

Answer 1

您需要先解决此问题，然后再继续寻求解决方案。将<?php ActiveForm::end (); ?>移到<div class="panel panel-default">结束标记后，因为目前这是错误的。

现在，您需要执行以下操作来完成

将“提交”按钮设为全局。
使用表单的“提交”按钮控制选项卡的导航

要使“提交”按钮变为全局，则意味着将其移出第三个选项卡，以便同时显示两个选项卡，您可以将其放置在<div class="tab-content"> div旁边或顶部。简而言之，请将其放置在我们可以继续单击并前进至下一个标签的位置。

现在，第二件事是在选项卡之间导航。首先，我们将一些属性添加到名称为nav-tabs的{{1}}内部的锚点上。

您的html如下所示

data-next

导航

我们将使用ActiveForm的<ul class="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist"> <li class="active" role="presentation"> <a data-toggle="tab" href="#profile" data-next="#user_kids" aria-controls="profile" role="tab"> <?= Yii::t ( 'app' , 'Profile' ); ?> </a> </li> <li role="presentation"> <a data-toggle="tab" href="#user_kids" data-next="#submit" aria-controls="user_kids" role="tab"> <?= Yii::t ( 'app' , 'User Kids' ); ?> </a> </li> </ul>事件，该事件将在我们单击“提交”按钮并验证字段后立即引发，以便在必填字段中添加类afterValidate 。

检测标签

在这里，我们在.has-error属性中添加下一个选项卡id，对于最后一个选项卡，我们将仅提供值data-next并在脚本中检查{{1} }，因为当前标签的值为submit，然后提交表单，否则将移至下一个标签。

验证完成后限制用户

我们将获得当前标签页和下一个标签页，然后检查活动标签页中的字段是否具有类data-next

在查看文件顶部添加以下javascript

submit

以上操作是执行基本操作所必需的，我已经添加了抖动效果功能.has-error，该功能需要添加一些Css并产生良好的效果，如果您不想使用它，可以将其注释掉。在$this->registerJs ( ' function shakeModal(tabpane){ $(""+tabpane+"").addClass("shake"); setTimeout( function(){ $(""+tabpane+"").removeClass("shake"); }, 1000 ); } $("#dynamic-form").on("afterValidate",function(e){ var currentTabID = $("#dynamic-form .nav-tabs").find("li.active>a").attr("href"); var nextTab = $("#dynamic-form .nav-tabs").find("li.active>a").data("next"); if($(currentTabId).find("div.has-error").length){ e.preventDefault(); shakeModal(currentTabID); return false; }else{ $(nextTab).tab("show"); $("#dynamic-form .nav-tabs li").removeClass("active"); $("#dynamic-form .nav-tabs li > a[href="\'+nextTab+\'"]").parent().addClass("active").tab("show"); $(".tab-content").children().each(function(){ $(this).find("div.has-error").removeClass("has-error"); $(this).find("div.has-success").removeClass("has-success"); }); } if(nextTab=="#submit"){ return true; }else{ e.preventDefault(); return false; } }); ' , yii\web\View::POS_END );块中调用shakeModal(tabpane)。

用于晃动标签的CSS，您可以将其添加到名称为shakeModal(currentTabID);的单独文件中，并包含在页面中

if

您可能会遇到一些错误，因为我没有使用您的结构对其进行测试，但希望它能工作

Yii2-在表单中使用引导标签，其他标签中的必填字段则保存表单保存

1 个答案: