Yii-Ajax加载的表单元素的用户端验证 [英] Yii - user side validation for ajax loaded form elements

问题描述

我正在以静态形式使用Yii用户端验证，这很棒. 但是我不知道如何为ajax加载的元素添加验证器.

I'm using Yii user side validation in static forms and it's great. But I don't know how to add validators for ajax loaded elements.

我有一个简单的表单窗口小部件，我想通过AJAX将更多的输入字段加载到其中(这对于小型jQuery脚本来说不是问题).但是我不知道如何为加载的元素添加Yii javascript验证器-我的意思是自动创建的JS验证器，例如:

I have simple form widget and I would like to load few more input fields into it via AJAX (that's not problem with small jQuery script). But I don't know how to add Yii javascript validators for loaded elements - I mean auto created JS validators like:

<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
$('#newsletter-form-footer').yiiactiveform({'validateOnSubmit':true,'validateOnChange':false,'afterValidate':Form.handleByAjax,'attributes':[{'id':'NewsletterForm_emailaddress','inputID':'NewsletterForm_emailaddress','errorID':'NewsletterForm_emailaddress_em_','model':'NewsletterForm','name':'emailaddress','enableAjaxValidation':false,'clientValidation':function(value, messages, attribute) {

if($.trim(value)=='') {
    messages.push("  VALIDATOR_REQUIRED");
}


if($.trim(value)!='' && !value.match(/^[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/)) {
    messages.push("  VALIDATOR_EMAIL");
}

}}]});
});
/*]]>*/
</script>

有什么方法可以添加或删除该验证器?

Is there any way how to add or remove that validators?

推荐答案

这有点棘手...如果要使用yiiactiveform进行操作，则必须:

This is little bit tricky... If you want to do it using yiiactiveform, you have to:

1. 向验证添加字段，或
2. 从验证中删除字段

我的建议是:

1. 创建自己的JavaScript验证功能(您可能希望在此处复制yii的验证代码)

1. Create your own JavaScript validation functions (you may want to copy yii's validation code here)

$('#newsletter-form-footer').submit(function() {
        return MyValidator.validate();
});

将字段加载到表单中

When you load a field into the form

//You have to get rulesORoptions
// along with fieldName from your ajax request.
MyValidator.add(fieldName, rulesORoptions);

从表单中删除字段时

When you Remove a field out of the form

MyValidator.remove(fieldName);

MyValidator代码在这里...

MyValidator code here...

var MyValidator = {
        fields: {},

        add: function(fieldName, rulesORoptions) {
                this.fields[fieldName] = rulesORoptions;
        },
        remove: function(fieldName) {
                delete this.fields[fieldName];
        },

        validate: function() {
                var success = true;
                for(var fieldName in this.fields) {
                        for(var rule in this.fields[fieldName]) {

                                if( eval('MyValidator.'+rule+'($("#'+fieldName+'").val())') == false ) {
                                        $("#'+fieldName+'_em_").html("validation failed (some error text, rulesORoptions may contain error text )");
                                        success = false;
                                }
                        }
                }

                return success;
        },

        /* Validation methods are here, 
           copy the javascript validation code from Yii
        */
        email: function(value) {
                if($.trim(value)!='' && !value.match(/^[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/)) {
                        return false;
                }

                return true;
        },
        required: function(value) {
                if($.trim(value)=='') {
                        return false;
                }

                return true;
        },
        number: function(value) {
                if(/*copy yii validation code */) {
                        return false;
                }

                return true;
        },
        .....
        .....
};

这篇关于Yii-Ajax加载的表单元素的用户端验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！