Run validation on blur of field

Author: zackify

example/src/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
 import Input from './input';
-import Form from 'react-validify';
+import Form from './form';
 
 class App extends Component {
   render() {

example/src/form.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import Validator from 'validatorjs';
+
+export default class Form extends React.Component {
+  constructor({ initialValues }) {
+    super();
+    this.state = { values: initialValues || {}, errors: {} };
+    this.onChange = this.onChange.bind(this);
+    this.validate = this.validate.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  componentWillReceiveProps({ errors, initialValues }) {
+    if (initialValues !== this.props.initialValues)
+      this.setState({ initialValues });
+
+    if (errors !== this.props.errors) this.setState({ errors });
+  }
+
+  validate(onClick) {
+    let { values } = this.state;
+
+    const runner = new Validator(values, this.props.rules);
+
+    if (runner.fails()) {
+      return this.setState({ errors: runner.errors.errors });
+    } else this.setState({ errors: {} });
+
+    return onClick(values);
+  }
+
+  onBlur(name) {
+    let { rules } = this.props;
+    let { errors, values } = this.state;
+
+    const runner = new Validator(
+      { [name]: values[name] },
+      { [name]: rules[name] }
+    );
+
+    if (runner.fails() && values[name]) {
+      return this.setState({ errors: { ...errors, ...runner.errors.errors } });
+    }
+    if (errors[name])
+      return this.setState({ errors: { ...errors, [name]: null } });
+  }
+
+  onChange({ target }) {
+    let { values } = this.state;
+    values[target.name] = target.value;
+    this.setState({ values });
+  }
+
+  renderChildren() {
+    return React.Children.map(this.props.children, child => {
+      if (!child || !child.props) return child;
+      let { values, errors } = this.state;
+
+      if (child.props.name)
+        return React.cloneElement(child, {
+          onChange: this.onChange,
+          onBlur: () => this.onBlur(child.props.name),
+          error: errors[child.props.name] &&
+            typeof errors[child.props.name] !== 'string'
+            ? errors[child.props.name][0]
+            : errors[child.props.name] || '',
+          value: values[child.props.name] || '',
+        });
+
+      if (child.props.submit) {
+        let { submit, ...otherProps } = child.props;
+
+        return React.createElement(child.type, {
+          ...otherProps,
+          onClick: () => this.validate(child.props.onClick),
+        });
+      }
+    });
+  }
+
+  render() {
+    let { children, rules, ...props } = this.props;
+    return <div {...props}>{this.renderChildren()}</div>;
+  }
+}

form.js

@@ -7,6 +7,7 @@ export default class Form extends React.Component {
     this.state = { values: initialValues || {}, errors: {} };
     this.onChange = this.onChange.bind(this);
     this.validate = this.validate.bind(this);
+    this.onBlur = this.onBlur.bind(this);
   }
 
   componentWillReceiveProps({ errors, initialValues }) {
@@ -28,6 +29,19 @@ export default class Form extends React.Component {
     return onClick(values);
   }
 
+  onBlur(name) {
+    console.log('here', name);
+    let { errors, values } = this.state;
+
+    const runner = new Validator({ [name]: values[name] }, this.props.rules);
+    if (runner.fails()) {
+      return this.setState({ errors: { ...errors, ...runner.errors.errors } });
+    }
+
+    if (errors[name])
+      return this.setState({ errors: { ...errors, [name]: null } });
+  }
+
   onChange({ target }) {
     let { values } = this.state;
     values[target.name] = target.value;
@@ -42,6 +56,7 @@ export default class Form extends React.Component {
       if (child.props.name)
         return React.cloneElement(child, {
           onChange: this.onChange,
+          onBlur: () => this.onBlur(child.props.name),
           error: errors[child.props.name] &&
             typeof errors[child.props.name] !== 'string'
             ? errors[child.props.name][0]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-validify",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Form validation made easy",
   "main": "dist/form.js",
   "directories": {