From 4bc88b2cc26534d050b01b655b427555ec4e7e53 Mon Sep 17 00:00:00 2001
From: "Yasser A.Idrissi" <getspookydev@gmail.com>
Date: Wed, 30 Sep 2020 11:42:14 +0200
Subject: [PATCH] Update README.md

---
 README.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 28c0520..8d8991c 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,8 @@ Let's define some validations in React components
 ```jsx
 import React, { useState } from 'react';
 import { useValidate } from 'reactrix';
+// Custom React Component to display messages.
+import { Alert } from './AlertComponent';
 
 function Login(props) {
   const [data, setData] = useState({});
@@ -63,12 +65,11 @@ function Login(props) {
       email: 'required|email',
       password: 'required|string'
     }); 
-   
   }
    
     
   return (
-    <form>  
+    <form onSubmit={handleSubmit}>  
         <div className="container">   
           <label>Email : </label>   
           <input type="email" placeholder="Enter Email" name="email" onChange={handleChange} />  
@@ -77,6 +78,7 @@ function Login(props) {
           <button type="submit" onClick={handleSubmit}>Login</button>     
           Forgot <a href="#"> password? </a>   
         </div>
+        <Alert data={msg} />
     </form>
   );
   
@@ -128,6 +130,9 @@ export { default as es } from '../locale/spanish.json';
 
 ## 🚦Common Rules 
 
+This is the list of all the rules you can validate form inputs against. When using multiple rules, separate them with a pipe `|`.
+
+
 | Keyword          |      Description                                                                                                | 
 |------------------|:----------------------------------------------------------------------------------------------------------------|
 | **Common Validator**                                                                                                               |