summaryrefslogtreecommitdiff
path: root/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
diff options
context:
space:
mode:
authorBlaster4385 <[email protected]>2022-08-12 08:44:33 +0530
committerBlaster4385 <[email protected]>2022-08-12 08:44:33 +0530
commit30a7a079b16e1d17e8cc920d2fb3338f79767432 (patch)
treec519f0f546c5161cb1668ba74fe2370ffed9d40a /client/src/pages/Enrollment/FormTwo/FormTwo.jsx
parent53795fe3153f514e0eda6a01f6e55eeb50c94d46 (diff)
Add form validators and country api
Diffstat (limited to 'client/src/pages/Enrollment/FormTwo/FormTwo.jsx')
-rw-r--r--client/src/pages/Enrollment/FormTwo/FormTwo.jsx32
1 files changed, 28 insertions, 4 deletions
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>
)
}