Yii框架中的验证

Question

如何在验证过程中对yii框架中的字段集动态设置边框？

失败时，fieldset的边框应变为红色，而成功时，fieldset的边框应变为绿色。

如果任何一个输入失败，如果所有元素都正确，则feildset应该显示失败和成功。

<fieldset class="field">
<div class="visible column">
<div>
<?php echo $form->labelEx( $modelAddress, 'First Name'); ?>
 <?php echo $form->textField( $modelAddress, 'firstName'); ?> 
<div class="indicator">&nbsp;</div>
<?php echo $form->error( $modelAddress, 'firstName'); ?>
 </div>
</div>
</fieldset>

//My Script
<script>
$(document).ready(function()
{ $("input").each(function(){if ($(this).hasClass("error"))
 { $(this).parent().parent().parent().parent().addClass("fieldseterror");
}
}); 

</script>

//PHP
<?php
$form = $this->beginWidget( 'CActiveForm', array(
'id' => 'registration',
'enableAjaxValidation' => true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
'afterValidate' => 'js:checkErrors'
    ),'htmlOptions' => array( 'class' => 'vertical inner custom_frm_styl')));
?>

Answer 1

您可以使用jQuery。Yii自动更改非验证字段，使其具有类.error，因此您可以检查是否有任何表单域具有类.error来更改您想要的任何内容，例如(未测试)：

<script>
    $(function(){
        $('#user-form').submit(function(){
            $("#user-form input").each(function(){
            if ($(this).hasClass("error")){
                    ...
                }
            });
        });
    });
</script>

Answer 2

我认为您可以使用CActiveForm的afterValidate属性。

$myform = $this->beginWidget('CActiveForm',array('id'=>'invoice-form',
    'enableClientValidation'=>true,
'clientOptions'=>array(
        'validateOnSubmit'=>true,
        'afterValidate' => 'js:checkErrors'
    )
));

<script type="text/javascript"> 
    function checkErrors(form, data, hasError) {
        if(!hasError) {
            $('.field').addClass("fieldseterror");
            //$(form).submit();
            return true;
        }
        else {
            //return false;
                }

    }
</script>

Answer 3

您只是没有访问正确的parent元素。尝试：

$(this).parent().parent().parent().addClass("fieldseterror");

此外，在yii中包含jquery代码的最好方法是使用CClientScript's registerScript()，因此在create.php中添加：

Yii::app()->clientScript->registerScript('checkkk','
            $("input").each(function(){
                if ($(this).hasClass("error")) {
                    var parent_element = $(this).parent().parent().parent();
                    console.log(parent_element);
                    if (!parent_element.hasClass("fieldseterror"))
                        parent_element.addClass("fieldseterror");
                }
            });
'); // you can add this right before the call to renderPartial()

如您所见，我添加了一个console.log()调用来检查匹配的父元素。此外，在添加字段集之前，最好检查它是否已经有了fieldseterror类。

为此，您不需要validateOnSubmit或afterValidate。