React Redux Form Validation

Author: sunzid02

confusion/src/components/ContactComponent.js

@@ -5,6 +5,16 @@ import { Link } from 'react-router-dom';
 
 import { Control, LocalForm, Errors } from 'react-redux-form';
 
+
+//// validators
+const required = (val) => val && val.length; //value > 0
+const maxLength = (len) => (val) => !(val) || (val.length <= len);
+const minLength = (len) => (val) => (val) &&( val.length >= len);
+const isNumber = (val) => !isNaN(Number(val));
+const validEmail = (val) => /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(val);
+
+
+
 class Contact extends Component{
 
     constructor(props){
@@ -82,8 +92,21 @@ class Contact extends Component{
                                 <Col md={10}>
                                     <Control.text  model=".firstname" id="firstname" name="firstname"
                                         placeholder="First Name"
-                                        className="form-control"                                    
+                                        className="form-control"   
+                                        validators={{
+                                            required, minLength: minLength(3), maxLength: maxLength(15)
+                                        }}                                 
                                     />
+                                    <Errors
+                                        className="text-danger"
+                                        model=".firstname"
+                                        show="touched"
+                                        messages={{
+                                            required: "Required",
+                                            minLength: 'Must be greater that 2 characters',
+                                            maxLength: 'Must be 15 characters or less',
+                                        }}
+                                    ></Errors>
                                 </Col>
                             </Row>
 
@@ -94,8 +117,20 @@ class Contact extends Component{
                                     <Control.text model=".lastname" id="lastname" name="lastname"
                                         placeholder="Last Name"
                                         className="form-control"
+                                        validators={{
+                                            required, minLength: minLength(3), maxLength: maxLength(15)
+                                        }}
+                                    />
+                                    <Errors
+                                        className="text-danger"
+                                        model=".lastname"
+                                        show="touched"
+                                        messages={{
+                                            required: 'Required',
+                                            minLength: 'Must be greater than 2 characters',
+                                            maxLength: 'Must be 15 characters or less'
+                                        }}
                                     />
-
                                 </Col>
                             </Row>
 
@@ -104,22 +139,46 @@ class Contact extends Component{
                                 <Label htmlFor="telnum" md={2}>Contact Tel.</Label>
                                 <Col md={10}>
                                     <Control.text model=".telnum" id="telnum" name="telnum"
-                                        placeholder="Telephone number"
+                                        placeholder="Tel. Number"
                                         className="form-control"
+                                        validators={{
+                                            required, minLength: minLength(3), maxLength: maxLength(15), isNumber
+                                        }}
+                                    />
+                                    <Errors
+                                        className="text-danger"
+                                        model=".telnum"
+                                        show="touched"
+                                        messages={{
+                                            required: 'Required',
+                                            minLength: 'Must be greater than 2 numbers',
+                                            maxLength: 'Must be 15 numbers or less',
+                                            isNumber: 'Must be a number'
+                                        }}
                                     />
-
                                 </Col>
                             </Row>
 
                             {/* email */}
                             <Row className="form-group">
                                 <Label htmlFor="email" md={2}>Email</Label>
                                 <Col md={10}>
-                                    <Control.text model=".email"  id="email" name="email"
+                                    <Control.text model=".email" id="email" name="email"
                                         placeholder="Email"
                                         className="form-control"
+                                        validators={{
+                                            required, validEmail
+                                        }}
+                                    />
+                                    <Errors
+                                        className="text-danger"
+                                        model=".email"
+                                        show="touched"
+                                        messages={{
+                                            required: 'Required',
+                                            validEmail: 'Invalid Email Address'
+                                        }}
                                     />
-
                                 </Col>
                             </Row>