Added a validation for all Text Input

src/components/Home.js

@@ -1,4 +1,4 @@
-import {Button, TextInput, rem, PasswordInput} from '@mantine/core';
+import {Button, TextInput, rem, PasswordInput, Text} from '@mantine/core';
 import { IconAt } from '@tabler/icons-react';
 import {useState} from 'react';
 import {http} from "../middleware/axiosConfig";
@@ -25,17 +25,38 @@ function Home() {
   // Initialize state to handle loading state
   const [loading,setLoading]=useState()
 
+  const [errors, setErrors] =useState({})
+
+
   //Inserts new account to the Database{reactapp.users}.post
   const onSubmitChange = async (e) => {
     e.preventDefault();
-    try{
-      const response= await http.post("/api/addnew", userField);
-      console.log(response)
-      setLoading(true);
-    } catch(err){
-      console.error(err)
-    console.log("Something's Wrong!");
+    //validation for errors
+    const validationErrors = {}
+    if (!userField.name.trim()){
+      validationErrors.name = <Text size="xs" fw={500} fs="italic" c="red">Name is Required!</Text>
     }
+    if (!userField.email.trim()){
+      validationErrors.email = <Text size="xs" fw={500} fs="italic" c="red">Email is Required!</Text>
+    } else if(!/^\S+@\S+$/.test(userField.email)){
+      validationErrors.email = <Text size="xs" fw={500} fs="italic" c="red">Email is Invalid!</Text>
+    }
+    if (!userField.password.trim()){
+      validationErrors.password = <Text size="xs" fw={500} fs="italic" c="red">Password is Required!</Text>
+    } else if(userField.password.length < 6){
+      validationErrors.password = <Text size="xs" fw={500} fs="italic" c="red">Password should be at least 6 characters!</Text>
+    }
+  
+      try {
+        setErrors(validationErrors)
+        const response = await http.post('/api/addnew', userField);
+        console.log(response);
+      } catch (err) {
+        console.error(err);
+        console.log("Something's Wrong!");
+      } finally {
+        setLoading(true);
+      }
   }
 
   //If loading is true, return to <Home />
@@ -47,7 +68,7 @@ function Home() {
   return (
     <div className="container">
         <h2 className='w-100 d-flex justify-content-center p-3'> ADD ACCOUNT </h2>
-        <form>
+        <form onSubmit={onSubmitChange}>
           <div>
             {/* Name Input */}
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
@@ -58,11 +79,13 @@ function Home() {
             name='name'
             id='name'
             onChange={e => changeUserFieldHandler(e)}
-            style={{ width: '400px', marginBottom: '10px' }}/></div>
+            style={{ width: '400px', marginBottom: '10px' }}/>   
+            </div>
+                {/* Validation Error */}
+                {errors.name && <div>{errors.name}</div>}
             {/* E-mail Input */}
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
             <TextInput
-            required
             leftSectionPointerEvents="none"
             leftSection={icon}
             label="E-mail:"
@@ -73,20 +96,23 @@ function Home() {
             onChange={e => changeUserFieldHandler(e)}
             style={{ width: '400px', marginBottom: '10px' }}/>
             </div>
+                {/* Validation Error */}
+                {errors.email && <div>{errors.email}</div>}
             {/* Password Input */}
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
             <PasswordInput
-            required
+            name='password'
             label="Password"
-            withAsterisk
             description="Please ensure that no special characters are included."
             placeholder="Enter Your Password"
             onChange={e => changeUserFieldHandler(e)}
             style={{ width: '400px', marginBottom: '10px' }}/>
             </div>
+                {/* Validation Error */}
+                {errors.password && <div>{errors.password}</div>}
             {/* Submit Button - triggers the onSubmitChange function*/}
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
-            <Button style={{ margin: 25 }} variant="filled" color="rgba(30, 128, 10, 1)" size="sm" radius="xl" onClick={e => onSubmitChange(e)}>Sign Up</Button>
+            <Button type="submit" style={{ margin: 25 }} variant="filled" color="rgba(30, 128, 10, 1)" size="sm" radius="xl" onClick={e => onSubmitChange(e)}>Sign Up</Button>
             </div>
           </div>
         </form>
@@ -94,4 +120,4 @@ function Home() {
   );
 }
 
-export default Home;
+export default Home