diff --git a/14-form-validation/a-validation/src/App.js b/14-form-validation/a-validation/src/App.js
index e0bb362..921090f 100644
--- a/14-form-validation/a-validation/src/App.js
+++ b/14-form-validation/a-validation/src/App.js
@@ -2,80 +2,83 @@ import React, { Component } from 'react';
import './App.css';
import '../node_modules/purecss/build/base.css';
import '../node_modules/purecss/build/forms.css';
+
class Field extends Component {
- static defaultProps = {
- value: '',
- type: 'text'
- }
- state = {
- invalidmsg: this.props.invalidmsg,
- value: this.props.value
- }
- render () {
- const {
- name,
- id = name,
- label,
- onChange
- } = this.props;
- const { value, invalidmsg } = this.state;
- const inputProps = {
- ...this.props,
- id,
- value,
- onChange: (e) => this.handleChange_onChange(e, onChange)
- };
- return (
-
-
-
- {
- invalidmsg ?
- {invalidmsg} :
- null
- }
-
- );
- }
- handleChange_onChange (e, onChange) {
- this.setState({
- value: e.target.value
- });
- this.validateField(e);
- if (onChange && typeof onChange === 'function') {
- onChange(e);
- }
- }
- validateField (e) {
- const { target } = e,
- { validity } = target,
- { valueMissing, valid } = validity;
- let invalidmsg;
- if (valueMissing) {
- invalidmsg = 'This is a required field';
- } else if (!valid) {
- invalidmsg = target.validationMessage;
- }
- this.setState({ invalidmsg });
- }
+ static defaultProps = {
+ value: '',
+ type: 'text'
+ }
+ state = {
+ invalidmsg: null,
+ value: this.props.value
+ }
+ render () {
+ const {
+ name,
+ id = name,
+ label,
+ onChange
+ } = this.props;
+ const { value, invalidmsg } = this.state;
+ const inputProps = {
+ ...this.props,
+ id,
+ value,
+ onChange: (e) => this.handleChange(e, onChange)
+ };
+ return (
+
+
+
+ {
+ invalidmsg ?
+ {invalidmsg} :
+ null
+ }
+
+ );
+ }
+ handleChange (e, onChange) {
+ this.setState({
+ value: e.target.value
+ });
+ this.validateField(e);
+ if (onChange && typeof onChange === 'function') {
+ onChange(e);
+ }
+ }
+ validateField (e) {
+ const { target } = e,
+ { validity } = target,
+ { valueMissing, valid } = validity;
+ let invalidmsg;
+
+ if (valueMissing) {
+ invalidmsg = 'This is a required field';
+ } else if (!valid) {
+ invalidmsg = this.props.invalidmsg || target.validationMessage;
+ }
+ this.setState({ invalidmsg });
+ }
}
-
+
class App extends Component {
render() {
return (
console.log('change', e)}
/>
console.log('change', e)}
- />
+ />
)
}