Yii CActiveForm builtin Javascript functions - Examples and Reference

As with the CGridView widget, there's a few builtin javascript functions that you can use to interact with a CActiveForm, in the client-side. These are useful for cases that you want to trigger Ajax validation at a time you specify, for instance.

Let's say I've created a very simple CActiveForm widget with only one attribute ("name") like the following:

<?php
$form = $this->beginWidget('CActiveForm', [
   'id' => 'my-form',
    'enableAjaxValidation' => true,
    'clientOptions' => [
        'validateOnSubmit' => true
]]);
?>

<div class="form">
    <?php echo $form->errorSummary($form_model); ?>
    <div class="controls">
        <?php echo $form->labelEx($form_model, 'name'); ?>
        <?php echo $form->textField($form_model, 'name'); ?>
        <?php echo $form->error($form_model, 'name'); ?>
    </div>
    <?php echo CHtml::submitButton('Submit'); ?>
</div>

<?php $this->endWidget(); ?>

argument definitions

formObject means the jQuery form object (the result of selector $('my-div'))

successCallback function of the form function(data) where data is the result of the validation.

errorCallback same as above

attributeName string, name of the form attribute to validate. (Note that this is not the full name (like the html attribute) but the attribute name as it appear on the form settings)

functions

• $.fn.yiiactiveform.getSettings(formObject);

• $.fn.yiiactiveform.validate(formObject, successCallback,errorCallback);

examples

• trigger ajax Validation on all fields in a Yii form ```javascript function triggerAjaxValidation(formObj){ var delay = 40; //allow some time for events to finish setTimeout(function(){

      //data('settings') is another way to fetch settings from a formObj
      var settings = formObj.data('settings');
      $.each(settings.attributes, function () {
          this.status = 2; // forcing ajax validation
      });
  
      //updating settings with the new status
      formObj.data('settings', settings);
      $.fn.yiiactiveform.validate(formObj, function (data) {
          $.each(settings.attributes, function () {
  
              //each attribute gets updated
              $.fn.yiiactiveform.updateInput(this, data, formObj);
  
          });
          $.fn.yiiactiveform.updateSummary(formObj, data);
      });
  },delay);
  

  } ```

  P.S.: I borrowed this code from this answer on stackoverflow, tweaked it a little and added some comments.

• trigger Ajax validation on a single attribute field in a Yii form:

  You can see this is very similar to the code above. The only difference is that only the selected field (whose name you should pass as an extra argument to this function) gets validated and updated: ```javascript function triggerAjaxValidationForAttribute(formObj, attributeName) { var delay = 40;

  setTimeout(function() {
      var settings = formObj.data('settings');
      $.each(settings.attributes, function() {
          if (this.name === attributeName) {
              this.status = 2; // force ajax validation
          }
      });
  
      formObj.data('settings', settings);
      $.fn.yiiactiveform.validate(formObj, function(data) {
          $.each(settings.attributes, function() {
              if (this.name === attributeName) {
                  $.fn.yiiactiveform.updateInput(this, data, formObj);
              }
          });
  
          $.fn.yiiactiveform.updateSummary(formObj, data);
      });
  }, delay);
  

  } ``` I've created a little github repo containing these form functions too, you might want to check it out (pun intended!).

W.I.P.: This is a Work in Progress