add package form validators

package.json

@@ -16,6 +16,7 @@
     "react-final-form": "^6.3.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
+    "redux-form-validators": "^3.3.2",
     "styled-components": "^4.3.1",
     "typescript": "3.5.2"
   },

src/components/pages/loanOffer/loanAmount/index.tsx

@@ -15,7 +15,7 @@ import {
 } from "../../../lib";
 import { StepLoanOfferWrapper, LoanAmountSimulation } from "../styled";
 import {
-  required,
+  requiredField,
   mustBeNumber,
   composeValidators
 } from "../../../../constant/validation";
@@ -60,9 +60,12 @@ class LoanAmount extends React.Component<LoanAmountProps, {}> {
                     </Margin>
                     <Margin bottom={32}>
                       <Field
-                        name="email"
+                        name="loanAmount"
                         type="number"
-                        validate={composeValidators(required, mustBeNumber)}
+                        validate={composeValidators(
+                          requiredField,
+                          mustBeNumber
+                        )}
                         render={({ input, meta }) => (
                           <React.Fragment>
                             <TextField
@@ -96,7 +99,10 @@ class LoanAmount extends React.Component<LoanAmountProps, {}> {
                         <Field
                           name="tac"
                           type="checkbox"
-                          validate={composeValidators(required, mustBeNumber)}
+                          validate={composeValidators(
+                            requiredField,
+                            mustBeNumber
+                          )}
                           render={({ input, meta }) => (
                             <React.Fragment>
                               <Checkbox
@@ -118,7 +124,10 @@ class LoanAmount extends React.Component<LoanAmountProps, {}> {
                         <Field
                           name="risk"
                           type="checkbox"
-                          validate={composeValidators(required, mustBeNumber)}
+                          validate={composeValidators(
+                            requiredField,
+                            mustBeNumber
+                          )}
                           render={({ input, meta }) => (
                             <React.Fragment>
                               <Checkbox
@@ -141,7 +150,10 @@ class LoanAmount extends React.Component<LoanAmountProps, {}> {
                         <Field
                           name="ableToContact"
                           type="checkbox"
-                          validate={composeValidators(required, mustBeNumber)}
+                          validate={composeValidators(
+                            requiredField,
+                            mustBeNumber
+                          )}
                           render={({ input, meta }) => (
                             <React.Fragment>
                               <Checkbox

src/components/pages/loanOffer/personalInfo/index.tsx

@@ -14,7 +14,11 @@ import {
   FieldError
 } from "../../../lib";
 import { StepLoanOfferWrapper } from "../styled";
-import { required } from "../../../../constant/validation";
+import {
+  requiredField,
+  emailFormat,
+  composeValidators
+} from "../../../../constant/validation";
 import createDecorator from "final-form-focus";
 import FormIllustration from "../../../../images/illustration/form.svg";
 
@@ -60,7 +64,7 @@ class PersonalInfo extends React.Component<PersonalInfoProps, {}> {
                     <Margin bottom={32}>
                       <Field
                         name="name"
-                        validate={required}
+                        validate={requiredField}
                         render={({ input, meta }) => (
                           <React.Fragment>
                             <TextField
@@ -87,7 +91,7 @@ class PersonalInfo extends React.Component<PersonalInfoProps, {}> {
                     <Margin bottom={32}>
                       <Field
                         name="email"
-                        validate={required}
+                        validate={composeValidators(requiredField, emailFormat)}
                         render={({ input, meta }) => (
                           <React.Fragment>
                             <TextField

src/constant/validation.tsx

@@ -1,11 +1,13 @@
-const required = (value: string) =>
-  typeof value === "undefined" || value === null || value === ""
-    ? "This field is required"
-    : undefined;
+import { required, email, numericality } from "redux-form-validators";
 
-const mustBeNumber = value => (isNaN(value) ? "Must be a number" : undefined);
+const emailFormat = email({ message: "Wrong format email" });
+const requiredField = required({ message: "This field is required" });
+const mustBeNumber = numericality({
+  int: true,
+  message: "Must be a number"
+});
 
 const composeValidators = (...validators: any[]) => (value: any) =>
   validators.reduce((error, validator) => error || validator(value), undefined);
 
-export { composeValidators, required, mustBeNumber };
+export { composeValidators, requiredField, mustBeNumber, emailFormat };

yarn.lock

@@ -8282,6 +8282,11 @@ recursive-readdir@2.2.2:
   dependencies:
     minimatch "3.0.4"
 
+redux-form-validators@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/redux-form-validators/-/redux-form-validators-3.3.2.tgz#63102146bf2e5a4bcbc869fb47b6258703d0206d"
+  integrity sha512-P/gav2nabqcqB3KfsjhSqzEpAnRjs7XP5ejMFeOHTBsekmnpb9qKhVid3xV5lJOnLO57pmKm/2POVoI8j+QmTw==
+
 regenerate-unicode-properties@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.0.2.tgz#7b38faa296252376d363558cfbda90c9ce709662"