event based validation state

Author: MacGyer

src/widgets/form/ActiveField.php

@@ -702,6 +702,9 @@ public function weekInput($options = [])
         return parent::input('week', $options);
     }
 
+    /**
+     * @inheritdoc
+     */
     public function error($options = [])
     {
         if ($options === false) {
@@ -714,6 +717,10 @@ public function error($options = [])
         return $this;
     }
 
+    /**
+     * Returns the JS options for the field.
+     * @return array the JS options.
+     */
     protected function getClientOptions()
     {
         $attribute = Html::getAttributeName($this->attribute);
@@ -767,7 +774,7 @@ protected function getClientOptions()
         }
 
         if (!empty($validators)) {
-            $options['validate'] = new JsExpression("function (attribute, value, messages, deferred, \$form) {" . implode('', $validators) . "$(attribute.container + ' ' + attribute.error).attr('data-error', messages[0]); messages[0] ? $(attribute.input).addClass('{$this->form->errorCssClass}').removeClass('{$this->form->successCssClass}') : $(attribute.input).removeClass('{$this->form->errorCssClass}').addClass('{$this->form->successCssClass}')}");
+            $options['validate'] = new JsExpression("function (attribute, value, messages, deferred, \$form) {" . implode('', $validators) . "}");
         }
 
         if ($this->addAriaAttributes === false) {

src/widgets/form/ActiveForm.php

@@ -37,6 +37,22 @@ class ActiveForm extends \yii\widgets\ActiveForm
      */
     public function init()
     {
+        if (!isset($this->options['id'])) {
+            $this->options['id'] = $this->getId();
+        }
+
+        if (!isset($this->options['data-success-class'])) {
+            $this->options['data-success-class'] = $this->successCssClass;
+        }
+
+        if (!isset($this->options['data-error-class'])) {
+            $this->options['data-error-class'] = $this->errorCssClass;
+        }
+
+        if ($this->enableClientValidation) {
+            $this->registerAfterValidateHandler();
+        }
+
         parent::init();
     }
 
@@ -51,4 +67,22 @@ public function field($model, $attribute, $options = [])
     {
         return parent::field($model, $attribute, $options);
     }
+
+    /**
+     * Register the necessary JS handlers to set error messages and validation state indicators.
+     */
+    protected function registerAfterValidateHandler()
+    {
+        $view = $this->getView();
+        $id = $this->options['id'];
+
+        $view->registerJs(<<<JS
+$('#{$id}').on('afterValidateAttribute', function (evt, attribute, messages) {
+    var yiiForm = $(this);
+    $(attribute.container + ' ' + attribute.error).attr('data-error', messages[0]);
+    messages[0] ? $(attribute.input).addClass(yiiForm.attr('data-error-class')).removeClass(yiiForm.attr('data-success-class')) : $(attribute.input).addClass(yiiForm.attr('data-success-class')).removeClass(yiiForm.attr('data-error-class'));
+});
+JS
+        );
+    }
 }