Question

我在表单中使用了jui自动完成小部件。模型验证在这里无法正常工作。

这是我的观点

<?php $form  = ActiveForm::begin();?>
<div class="members-form">

<div class="col-md-5">




                <?php
                $data = FamilyName::find()
                ->select(['name as value', 'name as  label','id as id'])
                ->asArray()
                ->all();

                echo 'Family Name' .'<br>';
                echo AutoComplete::widget([
                     'name' => 'family',    
                     'id' => 'family_name',
                     'clientOptions' => [
                        'source' => $data,
                        // 'minLength'=>'3', 
                        'autoFill'=>true,
                        'select' => new JsExpression("function( event, ui ) {
                        $('#members-family_name_id').val(ui.item.id);//#City-state_name is the id of hiddenInput.
                     }")],
                     ]);
                ?>

                <?= Html::activeHiddenInput($model, 'family_name_id')?>

                <?= $form->field($model, 'remarks')->textInput() ?>

<?php ActiveForm::end(); ?>
</div>
</div>

我的型号代码

public function rules()
    {
        return [
            [['family_name_id', 'first_name',
            'date_of_birth', 'relation_id', 'is_head','marital_status','remarks',
            'gender','address_id'], 'required'],

        ];
    }

现在，如果我尝试创建一个没有在任何字段中选择数据的新成员，那么必填字段将显示为红色的“...不能为空”。但是family_name_id没有显示这样的验证。如果将自动完成字段留空但未显示验证消息，则不会保存数据。如何在jui auto complete中显示验证消息？

Answer 1

我相信你遇到的问题和我几周前一样。我遇到了类似的行为：我看到了自动填充建议并可以与它们进行交互，但是当我离开输入字段时，客户端站点验证保持沉默。

如果查看视图生成的html，可以在底部看到一些javascript代码，它负责客户端验证。它看起来像：

jQuery(document).ready(function () {
  
....

jQuery('#app-new-form').yiiActiveForm(
[
{
"id":"application-familyname",
"name":" familyname ",
"container":".field-application-familyname",
"input":"#application-familyname",
"enableAjaxValidation":true,
"validate":function (attribute, value, messages, deferred, $form) {
  
			  yii.validation.required(value, messages, {"message":"Field cannot be empty"});
            }
}
], []);


.....

});

此代码为您的自动填充字段分配一个事件处理程序，以启动客户端验证。但你必须注意，哪个id用于该领域。不幸的是，yii2只使用你提供的id来构造html中的<input>元素。当它生成javascript代码时，id始终从少数永久部分生成。最重要的两个是模型的名称和属性的名称。在你的情况下，id应该是'your_modelname -family_name_id'。

由于您的解释并不完整，这只是猜测。因此，请查看您的html源代码，并确保您尝试验证的输入和JavaScript中的ID具有相同的ID（参见上文）。

Answer 2

您正在使用Html隐藏输入..您必须使用ActiveForm HiddenInput来显示错误验证..

使用

  <?= $form->field($model, 'family_name_id')->hiddenInput()->label(false);>

Answer 3

为什么不使用.social-media a { display: inline-block; width: 34px; height: 34px; line-height: 34px; text-align: center; margin-right: 10px; border-radius: 34px; } .social-media a.facebook { background: #3b5998; }而不是创建新的选择？

family_name_id

您可以使用<?= $form->field($model, "family_name_id")->dropDownList( ArrayHelper::map(FamilyName::find()->all(), 'id', 'name'), ['prompt' => 'Select'] ) ?>更改标签，但我建议更改模型（除非您需要＆＃34;姓氏ID和＃34;作为其他地方的标签）。

我知道您没有说过任何相关内容，但是我可以建议您查看this answer关于在视图中使用执行sql查询的方法吗？

如何在yii2中的自动完成字段上实现模型验证？

3 个答案: