有没有办法让 Yii CActiveForm 突出显示输入字段? [英] Is there a way to have Yii CActiveForm to highlight input fields?

查看:23
本文介绍了有没有办法让 Yii CActiveForm 突出显示输入字段?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我们像这样使用 CactiveForm Widget 时:

labelEx($model,'name');?><?php echo $form->textField($model,'name');?><?php echo $form->error($model,'name');?>

我们收到验证消息,但输入字段本身就是我们的文本字段,没有任何类.

我希望,当 Yii 验证时,输入字段中会出现一个类,以便它可以突出显示.

CHtml::activeTextField 实际上是这样做的:

<?php echo CHtml::activeLabel($model,'name');?><?php echo CHtml::activeTextField($model,'name') ?>

有什么办法可以使用 CActiveForm 做到这一点?

添加:

$form=$this->beginWidget('CActiveForm', array('id'=>'事件形式','启用客户端验证' =>真的,'clientOptions'=>

解决方案

对于要附加的默认错误类,您需要具有与默认自动生成的表单相同的表单结构,如下所示:

>

<?php $form=$this->beginWidget('CActiveForm', array(...));?><div class="row"><?php echo $form->labelEx($model,'name');?><?php echo $form->textField($model,'name');?><?php echo $form->error($model,'name');?>

...

这意味着每个输入字段都需要一个 inputContainer,因为这就是 jquery.activeform.js 的默认 css 和默认实现.要改变这种行为,我们可以简单地将另一个 css 规则添加到默认的 form.css 文件中,默认情况下,它只会向 div.form 内的 divs 添加错误代码>.

/*默认 CSS*/div.form div.error 输入,div.form div.error textarea,div.form div.error 选择,div.form input.error,div.form textarea.error,div.form select.error{背景:#FEE;边框颜色:#C00;}

所以你可以根据自己的喜好改变它,但最低要求是:

div.error input, div.error textarea, div.error select {/* 样式 */}

如果上述方法不起作用,并且您想分别为 input 元素 分配错误类,那么您可以使用 afterValidateafterValidateAttributeCActiveForm 的 clientOptions,您需要在其中将错误 css 类添加到输入中,并且还有一个 css 规则来匹配此类输入:

input.error, textarea.error, select.error {/*styles*/}

如果您使用某种形式的客户端验证,就像您在 beforeValidate 中所做的那样,您需要addClass('error'); 到您的输入,上面的 css 就位.

When we use CactiveForm Widget like this:

<?php echo $form->labelEx($model,'name'); ?>
<?php echo $form->textField($model,'name'); ?>
<?php echo $form->error($model,'name'); ?>

We get validation messages but, the input field himself our the textfield, don't get any class.

I wish to, when Yii validates, a class appears on the input field so that it could render highlighted.

CHtml::activeTextField actually does this:

<?php echo CHtml::activeLabel($model,'name'); ?>
<?php echo CHtml::activeTextField($model,'name') ?>

Any way to do this using CActiveForm ?

Added:

$form=$this->beginWidget('CActiveForm', array(
    'id'=>'event-form',
        'enableClientValidation' => true,
        'clientOptions'=>

解决方案

For the default error class to be attached you need to have the structure of your form as it is in the default auto generated forms, something like this:

<div class="form">
  <?php $form=$this->beginWidget('CActiveForm', array(
    ...
  )); ?>

    <div class="row">
        <?php echo $form->labelEx($model,'name'); ?>
        <?php echo $form->textField($model,'name'); ?>
        <?php echo $form->error($model,'name'); ?>
    </div>
    ...
</div>

Edit: Meaning you need an inputContainer for each input field, because that's how the default css and default implementation of jquery.activeform.js is. To change this behavior we can simply add another css rule to the default form.css file, which by default adds errors only to divs inside div.form.

/*
 default css
*/
div.form div.error input,
div.form div.error textarea,
div.form div.error select,
div.form input.error,
div.form textarea.error,
div.form select.error
{
    background: #FEE;
    border-color: #C00;
}

So you can change that to your liking, but minimum required will be :

div.error input, div.error textarea, div.error select {/* styles */}

Incase the above doesn't work and you want to assign error class to input elements individually then you can use the afterValidate and afterValidateAttribute callbacks of CActiveForm's clientOptions, where you'll need to add the error css class to the input, and also have a css rule to match such inputs:

input.error, textarea.error, select.error {/*styles*/}

Incase you use some form of client validation, like you have done in beforeValidate, you'll need to addClass('error'); to your inputs, with the above css in place.

这篇关于有没有办法让 Yii CActiveForm 突出显示输入字段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆