From 91eed756a71091fa34ab122bed25ea7bf725002c Mon Sep 17 00:00:00 2001
From: hariharan409 <hharan987@gmail.com>
Date: Sat, 10 Aug 2024 13:11:52 +0800
Subject: [PATCH] solved the form validation challenge

---
 src/03-form-validator/FormValidator.js | 43 +++++++++++++++++---------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/03-form-validator/FormValidator.js b/src/03-form-validator/FormValidator.js
index d5a8bb0..9c723c4 100644
--- a/src/03-form-validator/FormValidator.js
+++ b/src/03-form-validator/FormValidator.js
@@ -3,26 +3,41 @@ import { useState } from 'react'
 export default function FormValidator () {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
-  const [passwordConfirm, setPasswordConfirm] = useState('')
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+  const [messageList,setMessageList] = useState([]);
+
+  const onFormSubmit = (e) => {
+    try {
+      e.preventDefault();
+      const tempArray = [];
+      if(!(email.includes("@"))) {
+        tempArray.push("An email must have exactly one @ sign");
+      }
+      if(!(password.length >= 8)) {
+        tempArray.push("Password must be 8 characters or longer")
+      }
+      if(password !== passwordConfirm) {
+        tempArray.push("Passwords do not match! Please try again.")
+      }
+      if(tempArray.length === 0) {
+        tempArray.push("User Created!");
+      }
+      setMessageList(tempArray);
+    } catch (error) {
+      console.log(error.message);
+    }
+  }
 
   return (
-    <form>
+    <form onSubmit={onFormSubmit}>
       <h2>Sign Up!</h2>
       <label htmlFor='email'>Email</label>
-      <input
-        type='text' name='email'
-        onChange={e => setEmail(e.target.value)}
-      />
+      <input type='text' name='email' onChange={e => setEmail(e.target.value)} />
       <label htmlFor='password'>Password</label>
-      <input
-        type='password' name='password'
-        onChange={e => setPassword(e.target.value)}
-      />
+      <input type='password' name='password' onChange={e => setPassword(e.target.value)} />
       <label htmlFor='password-confirm'>Confirm Password </label>
-      <input
-        type='password' name='password-confirm'
-        onChange={e => setPasswordConfirm(e.target.value)}
-      />
+      <input type='password' name='password-confirm' onChange={e => setPasswordConfirm(e.target.value)} />
+      <span>{messageList.toString()}</span>
       <input type='submit' value='Submit' />
     </form>
   )