Adding Validation Feedback for UI

README.md

@@ -93,3 +93,4 @@ Firebase Common API Endpoint: <https://burger-builder-ram.firebaseio.com/>
 6. Handling Form Submission: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/5368d4df7ceb25d11d01bfdbe70495acde8acb33)
 7. Adding Custom Form Validation: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/95cada3e3288605a5e44a9e599b6dad31178d4e5)
 8. Fixing a Common Validation Gotcha using Interpolation: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/0be6a86ce1c2a7498664a1e8a08ef97e904f9b2b)
+9. Adding Validation Feedback for UI: [Commit Details]()

src/components/UI/Input/Input.component.jsx

@@ -19,7 +19,6 @@ const commonInputStyle = `
   }
 `;
 
-
 // STYLED COMPONENTS
 const InputDiv = styled.div`
   width: 100%;
@@ -33,15 +32,28 @@ const Label = styled.label`
   margin-bottom: 8px;
 `;
 
-const Input = styled.input`${commonInputStyle}`;
-const TextArea = styled.textarea`${commonInputStyle}`;
+const returnStyledComponent = baseComponent => {
+  return styled(baseComponent)`
+    border: ${props => props.invalid ? '1px solid red' : '1px solid #CCC'};
+    background-color: ${props => props.invalid ? 'salmon' : 'white'};
+    color: ${props => props.invalid ? 'red' : '#111'};
+  `;
+}
+
+const _Input = styled.input`${commonInputStyle}`;
+const Input = returnStyledComponent(_Input);
+
+const _TextArea = styled.textarea`${commonInputStyle}`;
+const TextArea = returnStyledComponent(_TextArea);
+
 const Select = styled.select`${commonInputStyle}`;
 
 const input = props => {
   let inputElement = null;
+  let invalid = props.invalid && props.shouldValidate;
   switch (props.elementType) {
     case 'textarea':
-      inputElement = <TextArea {...props.elementConfig} value={props.value} onChange={props.changed}/>;
+      inputElement = <TextArea {...props.elementConfig} value={props.value} onChange={props.changed} invalid={invalid} />;
       break;
 
     case 'select':
@@ -58,7 +70,7 @@ const input = props => {
 
     case 'input':
     default:
-      inputElement = <Input {...props.elementConfig} value={props.value} onChange={props.changed}/>;
+      inputElement = <Input {...props.elementConfig} value={props.value} onChange={props.changed} invalid={invalid} />;
   }
 
   return (

src/containers/Checkout/ContactData/ContactData.component.jsx

@@ -120,9 +120,7 @@ class ContactData extends Component {
     this.setState({ loading: true }, () => {
       const formData = {};
       for (let formElementIdentifier in this.state.orderForm)
-        formData[formElementIdentifier] = this.state.orderForm[
-          formElementIdentifier
-        ].value;
+        formData[formElementIdentifier] = this.state.orderForm[formElementIdentifier].value;
 
       console.log(formData);
 
@@ -150,37 +148,33 @@ class ContactData extends Component {
     });
   };
 
+  // RIGHT WAY FOR VALIDATION USING INTERPOLATION
+  checkValidity = (value, rules) => {
+    let isValid = true;
+    isValid = (rules.required) ? value.trim() !== "" && isValid : isValid;
+    isValid = rules.minLength ? value.length >= rules.minLength && isValid : isValid;
+    isValid = rules.maxLength ? value.length <= rules.maxLength && isValid : isValid;
+    return isValid;
+  }
+
   inputChangedHandler = (event, inputIdentifier) => {
     const orderForm = { ...this.state.orderForm }; // deep copy of orderForm => shallow copy of its nested objects
     const formElementCopy = { ...orderForm[inputIdentifier] }; // deep copy of the first nested object
     formElementCopy.value = event.target.value;
-    orderForm.valid = this.checkValidity(formElementCopy.value, formElementCopy.validation);
+    formElementCopy.valid = this.checkValidity(formElementCopy.value, formElementCopy.validation);
     console.log(orderForm);
     orderForm[inputIdentifier] = formElementCopy;
     this.setState({ orderForm });
   };
 
-  // RIGHT WAY FOR VALIDATION
-  checkValidity = (value, rules) => {
-    let isValid = true;
-    // If we assume that the input is already valid, we would
-    // if even for once the input gets falsified, it would
-    // be falsified for the rest of the rule checks, because
-    // of the interpolation check we are making as shown below.
-    isValid = rules.required ? value.trim() !== "" && isValid : isValid;
-    isValid = rules.minLength ? value.length >= rules.minLength && isValid : isValid;
-    isValid = rules.maxLength ? value.length <= rules.maxLength && isValid : isValid;
-    return isValid;
-  }
-
   render() {
     const formElementsArray = [];
     for (let key in this.state.orderForm)
       formElementsArray.push({
         id: key,
         config: this.state.orderForm[key],
       });
-
+    
     let form = (
       <form onSubmit={this.orderHandler}>
         {formElementsArray.map((formElement) => (
@@ -189,6 +183,8 @@ class ContactData extends Component {
             elementType={formElement.config.elementType}
             elementConfig={formElement.config.elementConfig}
             value={formElement.config.value}
+            invalid={!formElement.config.valid}
+            shouldValidate={formElement.config.validation}
             changed={(event) => this.inputChangedHandler(event, formElement.id)}
           />
         ))}