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

2022-01-04 00:00:00 validation jquery php yii

我在静态表单中使用 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;
            },
            .....
            .....
    };
    

  • 相关文章