Controlled Form Validation

Author: sunzid02

confusion/src/components/ContactComponent.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import { Breadcrumb, BreadcrumbItem, Button, Form, FormGroup, Label, Input, Col } from 'reactstrap';
+import { Breadcrumb, BreadcrumbItem, Button, Form, FormGroup, Label, Input, Col, FormFeedback } from 'reactstrap';
 import { Link } from 'react-router-dom';
 
 class Contact extends Component{
@@ -15,10 +15,18 @@ class Contact extends Component{
             agree: false,
             contactType: 'Tel.',
             message: '',
+
+            touched:{
+                firstname: false,
+                lastname: false,
+                telnum: false,
+                email: false,
+            },
         };
 
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleInputChange = this.handleInputChange.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
     }
 
     handleInputChange(event){
@@ -39,8 +47,61 @@ class Contact extends Component{
 
     }
 
+    handleBlur = (field)=>(evt)=>{
+        this.setState({
+            touched: { ...this.state.touched, [field]: true }
+        })
+    }
+
+    // checking validation
+    validate( firstname, lastname, telnum, email ){
+        const errors = {
+            firstname: '',
+            lastname: '',
+            telnum: '',
+            email: '',
+        };
+
+        // firstName
+        if (this.state.touched.firstname && firstname.length < 3) 
+        {
+            errors.firstname = 'First name should be >= 3 chars';    
+        }
+        else if (this.state.touched.firstname && firstname.length >= 10) 
+        {
+            errors.firstname = 'First name should be <= 10 chars';    
+        }
+
+        // lastname
+        if (this.state.touched.lastname && lastname.length < 3) 
+        {
+            errors.lastname = 'Last name should be >= 3 chars';    
+        }
+        else if (this.state.touched.lastname && lastname.length >= 10) 
+        {
+            errors.lastname = 'Last name should be <= 10 chars';    
+        }
+
+        // telnum
+        const reg = /^\d+$/; //all the char must be numbers
+
+        if (this.state.touched.telnum && !reg.test(telnum) ) 
+        {
+            errors.telnum = 'Telephone must be numbers';    
+        }
+
+        // email
+        if (this.state.touched.email && email.split('').filter(x => x=== '@').length !== 1 ) 
+        {
+            errors.email = 'Email should contain a @ sign';
+        }
+
+        return errors;
+    }
+
 
     render(){
+        const errors = this.validate(this.state.firstname, this.state.lastname, this.state.telnum, this.state.email);
 
         return (
             <div className="container">
@@ -102,8 +163,12 @@ class Contact extends Component{
                                     <Input type="text" id="firstname" name="firstname"
                                         placeholder="First Name"
                                         value={ this.state.firstname }
+                                        valid={errors.firstname === ''}
+                                        invalid={errors.firstname !== ''}
+                                        onBlur={this.handleBlur('firstname')}
                                         onChange={this.handleInputChange}
                                     />
+                                    <FormFeedback> {errors.firstname} </FormFeedback>
                                 </Col>
                             </FormGroup>
 
@@ -114,9 +179,14 @@ class Contact extends Component{
                                     <Input type="text" id="lastname" name="lastname"
                                         placeholder="Last Name"
                                         value={ this.state.lastname }
+                                        valid={errors.lastname === ''}
+                                        invalid={errors.lastname !== ''}
+                                        onBlur={this.handleBlur('lastname')}
                                         onChange={this.handleInputChange}
 
                                     />
+                                    <FormFeedback> {errors.lastname} </FormFeedback>
+
                                 </Col>
                             </FormGroup>
 
@@ -127,9 +197,14 @@ class Contact extends Component{
                                     <Input type="tel" id="telnum" name="telnum"
                                         placeholder="Telephone number"
                                         value={ this.state.telnum }
+                                        valid={errors.telnum === ''}
+                                        invalid={errors.telnum !== ''}
+                                        onBlur={this.handleBlur('telnum')}
                                         onChange={this.handleInputChange}
 
                                     />
+                                    <FormFeedback> {errors.telnum} </FormFeedback>
+
                                 </Col>
                             </FormGroup>
 
@@ -140,9 +215,14 @@ class Contact extends Component{
                                     <Input type="email" id="email" name="email"
                                         placeholder="Email"
                                         value={ this.state.email }
+                                        valid={errors.email === ''}
+                                        invalid={errors.email !== ''}
+                                        onBlur={this.handleBlur('email')}
                                         onChange={this.handleInputChange}
 
                                     />
+                                    <FormFeedback> {errors.email} </FormFeedback>
+
                                 </Col>
                             </FormGroup>