touched

Author: lfkwtz

demoApp/App.js

@@ -76,7 +76,7 @@ export default class App extends Component {
 
   renderError(id) {
     const {inputs} = this.state;
-    if (inputs[id].errorLabel && inputs[id].touched) {
+    if (inputs[id].errorLabel) {
       return <Text style={styles.error}>{inputs[id].errorLabel}</Text>;
     }
     return null;
@@ -94,6 +94,7 @@ export default class App extends Component {
               this.onInputChange({id: 'first_name', value});
             }}
             errorLabel={inputs.first_name.errorLabel}
+            touched={inputs.first_name.touched}
             onLayout={({nativeEvent}) => {
               this.setInputPosition({
                 ids: ['first_name'],
@@ -108,6 +109,7 @@ export default class App extends Component {
               this.onInputChange({id: 'last_name', value});
             }}
             errorLabel={inputs.last_name.errorLabel}
+            touched={inputs.last_name.touched}
             onLayout={({nativeEvent}) => {
               this.setInputPosition({
                 ids: ['last_name'],
@@ -132,6 +134,7 @@ export default class App extends Component {
                     this.onInputChange({id: 'birthday_month', value});
                   }}
                   errorLabel={inputs.birthday_month.errorLabel}
+                  touched={inputs.birthday_month.touched}
                   placeholder="Month"
                   keyboardType="number-pad"
                 />
@@ -142,6 +145,7 @@ export default class App extends Component {
                     this.onInputChange({id: 'birthday_day', value});
                   }}
                   errorLabel={inputs.birthday_day.errorLabel}
+                  touched={inputs.birthday_day.touched}
                   placeholder="Day"
                   keyboardType="number-pad"
                 />
@@ -152,6 +156,7 @@ export default class App extends Component {
                 this.onInputChange({id: 'birthday_year', value});
               }}
               errorLabel={inputs.birthday_year.errorLabel}
+              touched={inputs.birthday_year.touched}
               placeholder="Year"
               keyboardType="number-pad"
             />
@@ -163,6 +168,7 @@ export default class App extends Component {
               this.onInputChange({id: 'state', value});
             }}
             errorLabel={inputs.state.errorLabel}
+            touched={inputs.state.touched}
             onLayout={({nativeEvent}) => {
               this.setInputPosition({
                 ids: ['state'],
@@ -179,6 +185,7 @@ export default class App extends Component {
               this.onInputChange({id: 'zip', value});
             }}
             errorLabel={inputs.zip.errorLabel}
+            touched={inputs.zip.touched}
             onLayout={({nativeEvent}) => {
               this.setInputPosition({
                 ids: ['zip'],
@@ -242,4 +249,4 @@ const styles = StyleSheet.create({
     color: 'red',
     fontSize: 12,
   },
-});
+});

demoApp/components/FormInput.js

@@ -4,12 +4,16 @@ import {StyleSheet, Text, TextInput, View} from 'react-native';
 export default class FormInput extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      touched: false,
+    };
+
+    this.onBlur = this.onBlur.bind(this);
   }
 
   renderError() {
-    const {errorLabel} = this.props;
-    if (errorLabel) {
+    const {errorLabel, touched} = this.props;
+    if (errorLabel && (touched || this.state.touched)) {
       return (
         <View>
           <Text style={styles.error}>{errorLabel}</Text>
@@ -19,12 +23,18 @@ export default class FormInput extends Component {
     return null;
   }
 
+  onBlur() {
+    this.setState({
+      touched: true,
+    });
+  }
+
   render() {
     const {label} = this.props;
     return (
       <Fragment>
         <Text>{label}</Text>
-        <TextInput style={styles.input} {...this.props} />
+        <TextInput style={styles.input} {...this.props} onBlur={this.onBlur} />
         {this.renderError()}
       </Fragment>
     );

demoApp/validation/service.js

@@ -27,13 +27,14 @@ function onInputChange({id, value, cb = () => {}}) {
   );
 }
 
-function getInputValidationState({input, value}) {
+function getInputValidationState({input, value, touched}) {
   return {
     ...input,
     value,
     errorLabel: input.optional
       ? null
       : validateInput({type: input.type, value}),
+    touched: touched || input.touched,
   };
 }
 
@@ -63,6 +64,7 @@ function getFormValidation() {
     updatedInputs[key] = getInputValidationState({
       input,
       value: input.value,
+      touched: true,
     });
   }