Form: add validate event (#10351)

examples/docs/en-US/form.md

@@ -854,6 +854,11 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | resetFields | reset all the fields and remove validation result | — |
 | clearValidate | clear validation message for all fields | -
 
+### Form Events
+| Event Name | Description | Parameters |
+|----------- |------------ |----------- |
+| validate   | triggers after a form item is validated | prop name of the form item being validated, whether validation is passed |
+
 ### Form-Item Attributes
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -861,7 +866,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | prop | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | keys of model that passed to `form` |
 | label | label | string | — | — |
 | label-width | width of label, e.g. '50px' | string | — | — |
-| required | whether the field is required or not, will be determined by validation rules if omitted | string |  — | false |
+| required | whether the field is required or not, will be determined by validation rules if omitted | boolean |  — | false |
 | rules | validation rules of form | object | — | — |
 | error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
 | show-message  | whether to show the error message | boolean | — | true |

examples/docs/es/form.md

@@ -859,6 +859,11 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 | resetFields   | restablece todos los campos y elimina el resultado de validación | —                                        |
 | clearValidate | limpia mensaje de validación para todos los campos | -
 
+### Form Events
+| Nombre     | Descripción | Parametros |
+|----------- |------------ |----------- |
+| validate   | triggers after a form item is validated | prop name of the form item being validated, whether validation is passed |
+
 ### Form-Item Atributos
 
 | Atributo       | Descripción                              | Tipo    | Valores aceptados                   | Por defecto |
@@ -866,7 +871,7 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 | prop           | un key de `model`. En el uso del método validate and resetFields, el atributo es obligatorio. | string  | keys of model that passed to `form` |             |
 | label          | etiqueta                                 | string  | —                                   | —           |
 | label-width    | ancho de la etiqueta, e.g. '50px'        | string  | —                                   | —           |
-| required       | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | string  | —                                   | false       |
+| required       | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean  | —                                   | false       |
 | rules          | reglas de validacion del form            | object  | —                                   | —           |
 | error          | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string  | —                                   | —           |
 | show-message   | si mostrar o no el mensaje de error      | boolean | —                                   | true        |

examples/docs/zh-CN/form.md

@@ -842,6 +842,11 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 | resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | -
 | clearValidate | 移除整个表单的校验结果 | -
 
+### Form Events
+| 事件名称 | 说明    | 回调参数  |
+|--------- |-------- |---------- |
+| validate | 任一表单项被校验后触发 | 被校验的表单项 prop 值，校验是否通过 |
+
 ### Form-Item Attributes
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -849,7 +854,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 | prop    | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string    | 传入 Form 组件的 `model` 中的字段 | — |
 | label | 标签文本 | string | — | — |
 | label-width | 表单域标签的的宽度，例如 '50px' | string |       —       | — |
-| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
+| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | — | false |
 | rules    | 表单验证规则 | object | — | — |
 | error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |

packages/form/src/form-item.vue

@@ -197,6 +197,7 @@
           this.validateMessage = errors ? errors[0].message : '';
 
           callback(this.validateMessage, invalidFields);
+          this.elForm && this.elForm.$emit('validate', this.prop, !errors);
         });
       },
       clearValidate() {

test/unit/specs/form.spec.js

@@ -755,4 +755,59 @@ describe('Form', () => {
       });
     });
   });
+  it('validate event', done => {
+    vm = createVue({
+      template: `
+          <el-form :model="form" :rules="rules" ref="form" @validate="onValidate">
+            <el-form-item label="活动名称" prop="name" ref="name">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="活动地点" prop="addr" ref="addr">
+              <el-input v-model="form.addr"></el-input>
+            </el-form-item>
+          </el-form>
+        `,
+      data() {
+        return {
+          form: {
+            name: '',
+            addr: ''
+          },
+          valid: {
+            name: null,
+            addr: null
+          },
+          rules: {
+            name: [
+              { required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }
+            ],
+            addr: [
+              { required: true, message: '请输入活动名称', trigger: 'change' }
+            ]
+          }
+        };
+      },
+      methods: {
+        onValidate(prop, valid) {
+          this.valid[prop] = valid;
+        },
+        setValue(prop, value) {
+          this.form[prop] = value;
+        }
+      }
+    }, true);
+    vm.setValue('name', '1');
+    setTimeout(() => {
+      expect(vm.valid.name).to.equal(false);
+      vm.setValue('addr', '1');
+      setTimeout(() => {
+        expect(vm.valid.addr).to.equal(true);
+        vm.setValue('name', '111');
+        setTimeout(() => {
+          expect(vm.valid.name).to.equal(true);
+          done();
+        }, DELAY);
+      }, DELAY);
+    }, DELAY);
+  });
 });