Yii2实现表单客户端验证提示信息出现在指定位置

最新推荐文章于 2021-12-12 03:48:54 发布

morose999

最新推荐文章于 2021-12-12 03:48:54 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Yii2 文章标签： yii

本文链接：https://blog.youkuaiyun.com/morose999/article/details/50500613

Yii2 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Yii2中自定义表单客户端验证提示信息的位置。通过修改yii.activeForm.js的afterValidateAttribute事件，可以在特定的CSS选择器如.box .tip下显示错误信息。同时，为了解决未填写内容就提交时错误信息显示问题，利用afterValidate事件进行调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Yii2中如果启用了客户端验证，默认的是在input后面显示错误信息，它在input后面添加了一个<div class='help-block'></div>代码，错误信息就是在这个div里面显示的。但有时候，因为设计界面的原因，验证信息只能在某个固定位置显示时应该怎么办呢？找遍类参考手册好像都没看到这方面的设置。OK，让我们看看源码：

1、打开@vendor\yiisoft\yii2\assets\yii.activeForm.js，发现它在这里定义了var events={...}，这里面的事件就是我们要用到的了。

2、比如我想在input失去焦点后在我的.box .tip里面显示错误信息，可以使用afterValidateAttribute事件，具体的事件说明可以看此js源码

$('#register-form').on('afterValidateAttribute',function(event, attribute, messages){
    message=messages.length>0 ? messages[0] : ''
    toggleTip(message);
});

例如，我的form ID是register-form，我在这里判断是否有错误信息，如果有的话调用toggleTip(message)显示出来。

3、不过input后面的.help-block DIV还是会显示错误信息，如果不想显示的话，用css隐藏掉.help-block，或者你用其他方式也行。

上面好像解决了我的需求，不过在我未在表单输入内容时直接点击提交按钮，我勒个去，怎么最后一个input的错误提示先显示出来了？这个不爽，再翻翻events，找到个afterValidate，OK，用这个试试：

$('#register-form').on('afterValidate',function (event, messages, errorAttributes){
    if(errorAttributes.length>0){
        toggleTip(messages[errorAttributes[0].id][0]);
    }else{
        toggleTip('');
    }
});

为什么要这么写呢，大家可以console.log messages跟errorAttributes出来看看就明白了。太晚了，不写了。还有个验证码的错误提示还没解决，改天再战过！