feat: scroll to invalid field automatically #993

components/form/demo/validate-other.md

@@ -2,9 +2,7 @@
 
 - order: 12
 
-提供以下组件表单域的校验。
+提供以下组件表单域的校验：`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。在 submit 时使用 `validateFieldsAndScroll`，进行校验，可以自动把不在可见范围内的校验不通过的菜单域滚动进可见范围。
-
-`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。
 
 ---
 
@@ -23,7 +21,7 @@ let Demo = React.createClass({
 
   handleSubmit(e) {
     e.preventDefault();
-    this.props.form.validateFields((errors, values) => {
+    this.props.form.validateFieldsAndScroll((errors, values) => {
       if (!!errors) {
         console.log('Errors in form!!!');
         return;

components/form/index.jsx

@@ -2,7 +2,7 @@ import Form from './Form';
 import FormItem from './FormItem';
 import ValueMixin from './ValueMixin';
 import Input from '../input';
-import { createForm } from 'rc-form';
+import createDOMForm from 'rc-form/lib/createDOMForm';
 
 Form.create = (o = {}) => {
   const options = {
@@ -11,7 +11,7 @@ Form.create = (o = {}) => {
     fieldMetaProp: '__meta',
   };
 
-  return createForm(options);
+  return createDOMForm(options);
 };
 Form.Item = FormItem;
 

components/form/index.md

@@ -75,6 +75,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | setFieldsValue | 设置一组输入控件的值 | Function(obj: object) | | |
 | setFields | 设置一组输入控件的值与 Error | Function(obj: object) | | |
 | validateFields | 校验并获取一组输入域的值与 Error | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) | | |
+| validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` | | |
 | getFieldError | 获取某个输入控件的 Error | Function(name) | | |
 | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | | |
 | resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) | | | |

components/input/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import assign from 'object-assign';
+import classNames from 'classnames';
 
 function prefixClsFn(prefixCls, ...args) {
   return args.map((s) => {
@@ -54,8 +55,12 @@ class Input extends React.Component {
       </span>
     ) : null;
 
+    const className = classNames({
+      [`${props.prefixCls}-input-wrapper`]: true,
+      [wrapperClassName]: (addonBefore || addonAfter),
+    });
     return (
-      <span className={(addonBefore || addonAfter) ? wrapperClassName : ''}>
+      <span className={className}>
         {addonBefore}
         {children}
         {addonAfter}

package.json

@@ -45,7 +45,7 @@
     "rc-collapse": "~1.4.4",
     "rc-dialog": "~5.3.1",
     "rc-dropdown": "~1.4.3",
-    "rc-form": "~0.12.1",
+    "rc-form": "~0.13.0",
     "rc-form-validation": "~2.5.0",
     "rc-input-number": "~2.4.1",
     "rc-menu": "~4.10.2",

style/components/form.less

@@ -21,6 +21,9 @@ label {
 }
 
 // Input styles
+.@{css-prefix}input-wrapper {
+  display: block;
+}
 .@{css-prefix}input {
   .input;
 }