Yii - ajax 加载的表单元素的用户端验证

Posted 2023-05-08

【中文标题】Yii - ajax 加载的表单元素的用户端验证

【英文标题】：Yii - user side validation for ajax loaded form elements

【发布时间】：2012-08-13 18:02:48

【问题描述】：

我在静态表单中使用 Yii 用户端验证，这很棒。 但我不知道如何为 ajax 加载的元素添加验证器。

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

<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>

有什么方法可以添加或删除验证器吗？

【问题讨论】：

以标准方式添加验证器：通过渲染使用适当输入元素渲染的视图（例如，使用this 和类似方法或通过CActiveForm）

我已经有了。但我还有另一个问题：我有元素验证器：$email = new Yp_Form_Element(Yp_Form_Element::FIELD_textField, 'email', $this); $email->setRequired() 但是 Yii 在渲染页面后创建 javascript 客户端验证脚本。但是我需要为这个脚本添加一些东西来加载 ajax 元素。

如何渲染所有输入并使用 jquery 隐藏它们，而不是通过 ajax 加载它们。如果没有太多。

@Asgaroth 这不是一个好的解决方案 - 如果我按照你的方式做，我会有大约 50 个输入......

【参考方案1】：

这有点棘手...如果你想使用 yiiactiveform 来做，你必须：

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

我的建议是：

创建你自己的 JavaScript 验证函数（你可能想在这里复制 yii 的验证代码）

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

当您将字段加载到表单中时

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

当您从表单中删除字段时

MyValidator.remove(fieldName);

MyValidator 代码在这里...

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;
        ,
        .....
        .....
;