validating input only after an specific amount of time, for better usability and performance .. then automatically touch it so the errors get displayed

Author: dsumer

README.md

@@ -34,7 +34,7 @@ import React from 'react';
 import Input from '@cat-react/form/Input'
 
 @Input
-export default class TextInput extends React.Component {
+export default class BasicInput extends React.Component {
     onChange(event) {
         this.props.setValue(event.target.value);
     }
@@ -49,26 +49,28 @@ export default class TextInput extends React.Component {
             return null;
         }
 
-        return <ul>{errorMessages.map((message, i) => <li key={i}>{message}</li>)}</ul>;
+        return <ul className="errorText">{errorMessages.map((message, i) => <li key={i}>{message}</li>)}</ul>;
     }
 
     render() {
-        let className = '';
+        let className = 'form-control';
         if (!this.props.isPristine()) {
-            className = this.props.isValid() ? null : 'error';
+            className += this.props.isValid() ? '' : ' error';
         }
 
-        // TODO: remove onBlur
         return (
-            <label>
-                {this.props.label} {this.props.isRequired() ? '*' : null}
-                <input className={className}
-                       type="text"
+            <div className="form-group">
+                <label htmlFor={this.props.name}>{this.props.label} {this.props.isRequired() ? '*' : null}</label>
+                <input type={this.props.type}
+                       className={className}
+                       id={this.props.name}
+                       aria-describedby={this.props.name}
+                       placeholder={this.props.placeholder}
                        value={this.props.getValue()}
                        onChange={this.onChange.bind(this)}
-                       onBlur={this.props.onBlur}/>
+                       onBlur={this.props.touch} />
                 {this.renderErrors()}
-            </label>
+            </div>
         );
     }
 }

examples/Login/index.js

@@ -27,6 +27,10 @@ export default class App extends React.Component {
         });
     }
 
+    onSubmit(values, valid) {
+        console.log(values, valid);
+    }
+
     onValidSubmit(values) {
         this.setState({
             values: values
@@ -37,6 +41,7 @@ export default class App extends React.Component {
         return (
             <Form onValid={this.onValid}
                   onInvalid={this.onInvalid}
+                  onSubmit={this.onSubmit}
                   onValidSubmit={this.onValidSubmit}>
                 <h1>Login</h1>
                 <BasicInput label="Email address"

examples/components/BasicInput.js

@@ -26,7 +26,6 @@ export default class BasicInput extends React.Component {
             className += this.props.isValid() ? '' : ' error';
         }
 
-        // TODO: remove onBlur
         return (
             <div className="form-group">
                 <label htmlFor={this.props.name}>{this.props.label} {this.props.isRequired() ? '*' : null}</label>
@@ -37,7 +36,7 @@ export default class BasicInput extends React.Component {
                        placeholder={this.props.placeholder}
                        value={this.props.getValue()}
                        onChange={this.onChange.bind(this)}
-                       onBlur={this.props.onBlur} />
+                       onBlur={this.props.touch} />
                 {this.renderErrors()}
             </div>
         );

src/Form.js

@@ -25,10 +25,10 @@ export default class Form extends React.Component {
     getChildContext() {
         return {
             _reactForm: {
-                enableTouchedOnChange: this.props.enableTouchedOnChange,
                 attach: this.attachInput,
                 detach: this.detachInput,
-                validate: this.validateInput,
+                addToValidationQueue: this.addToValidationQueue,
+                startValidation: this.startValidation,
                 getValues: this.getValues
             }
         };
@@ -200,11 +200,7 @@ Form.propTypes = {
     onValidSubmit: PropTypes.func,
     onInvalidSubmit: PropTypes.func,
     onValid: PropTypes.func,
-    onInvalid: PropTypes.func,
-    enableTouchedOnChange: PropTypes.bool
-};
-Form.defaultProps = {
-    enableTouchedOnChange: false
+    onInvalid: PropTypes.func
 };
 Form.childContextTypes = {
     _reactForm: PropTypes.object

src/Input.js

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types';
 import autoBind from 'auto-bind';
 import Form from './Form';
 
+const CHANGE_VALUE_TIMEOUT = 350;
+
 export default function (WrappedComponent) {
     class Input extends React.Component {
         constructor(props, context) {
             super(props, context);
 
+            this.changeValueTimer = null;
             this.dependencies = [];
             for (let dependency of props.dependencies) {
                 this.addDependency(dependency);
@@ -79,18 +82,15 @@ export default function (WrappedComponent) {
         }
 
         setValue(value) {
-            // TODO: check if needed, maybe instead just wait 500ms for validation (and cancel if value gets changed before)
-            const isTouchedOnChange = this.context._reactForm.enableTouchedOnChange;
-            if (isTouchedOnChange && this.isPristine()) {
-                this.setState({
-                    pristine: false
-                });
-            }
-
+            clearTimeout(this.changeValueTimer);
+            this.context._reactForm.addToValidationQueue(this);
             this.setState({
                 value: value
             }, () => {
-                this.context._reactForm.validate(this);
+                this.changeValueTimer = setTimeout(() => {
+                    this.touch();
+                    this.context._reactForm.startValidation();
+                }, CHANGE_VALUE_TIMEOUT);
             });
         }
 
@@ -160,7 +160,7 @@ export default function (WrappedComponent) {
                 getValue: this.getValue,
                 setValue: this.setValue,
                 getErrorMessages: this.getErrorMessages,
-                onBlur: this.touch,
+                touch: this.touch,
                 ...this.props
             };
 

tests/Input.spec.js

@@ -12,7 +12,8 @@ let formContext = {
         _reactForm: {
             attach: jest.fn(),
             detach: jest.fn(),
-            validate: jest.fn(),
+            addToValidationQueue: jest.fn(),
+            startValidation: jest.fn(),
             getValues: function () {
                 return mockValues;
             }
@@ -50,12 +51,17 @@ describe('Input', () => {
         expect(instance.isPristine()).toBe(false);
     });
 
-    it('should change the value correctly', () => {
+    it('should change the value correctly', (done) => {
         let wrapper = shallow(<CustomInput name="email" value="myValue2"/>, formContext);
         wrapper.instance().setValue('myValue3');
         wrapper.update();
         expect(wrapper.instance().getValue()).toBe('myValue3');
-        expect(formContext.context._reactForm.validate).toBeCalledWith(wrapper.instance());
+        expect(formContext.context._reactForm.addToValidationQueue).toBeCalledWith(wrapper.instance());
+        expect(formContext.context._reactForm.startValidation).toHaveBeenCalledTimes(0);
+        setTimeout(function () {
+            expect(formContext.context._reactForm.startValidation).toHaveBeenCalledTimes(1);
+            done();
+        }, 400);
     });
 
     it('should unmount correctly', () => {