From 30a7a079b16e1d17e8cc920d2fb3338f79767432 Mon Sep 17 00:00:00 2001
From: Blaster4385 <venkateshchaturvedi12@gmail.com>
Date: Fri, 12 Aug 2022 08:44:33 +0530
Subject: Add form validators and country api

---
 client/src/pages/Enrollment/FormTwo/FormTwo.jsx | 32 +++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

(limited to 'client/src/pages/Enrollment/FormTwo/FormTwo.jsx')

diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index 3ea8447..a0aebcf 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Input from '../../../components/Input/Input'
 import Header from '../../../components/Header/Header'
@@ -10,8 +10,28 @@ const FormTwo = () => {
 
   const navigate = useNavigate()
 
+  const handleSubmit = () => {
+    navigate('/enrollment/address')
+  }
+
+  useEffect(() => {
+    const eMail = document.getElementById('email')
+    function emailValidator () {
+      if (eMail.validity.patternMismatch) {
+        eMail.setCustomValidity('Email must contain @')
+      } else {
+        eMail.setCustomValidity('')
+      }
+    }
+    console.log(eMail)
+    eMail.addEventListener('input', emailValidator)
+    return () => {
+      eMail.removeEventListener('input', emailValidator)
+    }
+  }, [])
+
   return (
-    <div className="formtwo">
+    <form onSubmit={() => handleSubmit()} className="formtwo">
       <Header subheading="Enrollment" />
       <Input
         id="mobile"
@@ -20,6 +40,9 @@ const FormTwo = () => {
         type="text"
         onChange={(e) => setMobileNumber(e.target.value)}
         placeholder="Enter your Mobile Number"
+        pattern="[0-9]+"
+        maxLength="10"
+        minLength="10"
       />
       <Input
         id="email"
@@ -28,9 +51,10 @@ const FormTwo = () => {
         type="email"
         onChange={(e) => setEmail(e.target.value)}
         placeholder="Enter your Email ID"
+        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
       />
-      <SubmitButton onClick={() => navigate('/enrollment/address')} />
-    </div>
+      <SubmitButton />
+    </form>
   )
 }
 
-- 
cgit