diff options
author | Blaster4385 <[email protected]> | 2022-08-12 08:44:33 +0530 |
---|---|---|
committer | Blaster4385 <[email protected]> | 2022-08-12 08:44:33 +0530 |
commit | 30a7a079b16e1d17e8cc920d2fb3338f79767432 (patch) | |
tree | c519f0f546c5161cb1668ba74fe2370ffed9d40a /client/src/pages/Enrollment/FormTwo/FormTwo.jsx | |
parent | 53795fe3153f514e0eda6a01f6e55eeb50c94d46 (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.jsx | 32 |
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> ) } |