Question

我想在$ form-＆gt; error（）中定义的ajax验证期间显示加载图标。我需要做什么？

来自文档：

[validatingCssClass：string，要分配给容器的CSS类，其关联输入当前正通过AJAX验证。默认为'验证'。]

<style type="text/css">
.validating {

    background-color: #FF02FF;
}
</style>

   <?php /** @var TbActiveForm $form */
    $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
        'id'=>'prezentacija-form',
        'enableAjaxValidation'=>true,
        'htmlOptions'=>array('class'=>'well'),
            'clientOptions'=>array(
                'validateOnType'=>true,

            ),
    )); ?>

  .....

  <?php echo $form->error($model,'naziv', array('validateOnType'=>true)); ?>

Answer 1

您可以使用CSS2执行此操作，设置background-image，您可能还希望使用background-position定位此图像。样本：

/* I have a new styles.css file in project/css folder */
.validating {
    background-image: url(../images/loading.gif); /* my image is in project/images folder */
    background-position: right center; /* positioning has to be done correctly */
    background-repeat: no-repeat;
}

确保图像大小合适，或者您可以使用CSS3的background-size属性（首先检查浏览器兼容性）。

在Yii前面，您不必向表单clientOptions添加任何内容，因为默认validatingCssClass已经validating：

'clientOptions'=>array(
    'validateOnType'=>true,
    'validatingCssClass'=>'validating'
    // if the class is validating, it's already applied, so the line is redundant, use only if your validating class is different
),

如果你在localhost上进行测试，显然你不会注意到发生的变化，因为没有网络延迟，但要测试它，并且正确定位你需要看到它，因此你可以引入一些延迟验证操作方法，使用php's usleep：

public function actionActionId() {
    $model=new Prezentacija;
    usleep(10000); // for me 10000 microseconds was enough delay
    $this->performAjaxValidation($model);
    // ... rest of your code ...
}

如何使用clientOptions validatingCss

1 个答案: