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

Question

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.

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?

Answer 1

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

1. Add a field to validation, or
2. Remove a field from validation

My suggestion is:

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();
   });
   

2. When you load a field into the form

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

3. When you Remove a field out of the form

   MyValidator.remove(fieldName);
   

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