added default validation for employment verification page
This commit was merged in pull request #2.
This commit is contained in:
victorAnumudu
@@ -6,50 +6,44 @@ import {Formik, Form} from 'formik'
|
||||
import * as Yup from "yup";
|
||||
|
||||
const initialValues = {
|
||||
title: "",
|
||||
marital_status: "",
|
||||
agent_id: "",
|
||||
bvn: "",
|
||||
first_name: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
surname: "",
|
||||
dob: "",
|
||||
second_name: "",
|
||||
spouse_bvn: "",
|
||||
salary_acct: "",
|
||||
confirm_salary_acct: false,
|
||||
qualification: "",
|
||||
doe: "",
|
||||
gl: "",
|
||||
ippis: "",
|
||||
employer_name: "",
|
||||
designation: "",
|
||||
checked: false
|
||||
};
|
||||
|
||||
// To get the validation schema
|
||||
const validationSchema = Yup.object().shape({
|
||||
title: Yup.string()
|
||||
.required("Required"),
|
||||
marital_status: Yup.string()
|
||||
.required("Required"),
|
||||
agent_id: Yup.string()
|
||||
.required("Required"),
|
||||
bvn: Yup.string()
|
||||
.required("BVN is required")
|
||||
salary_acct: Yup.string()
|
||||
.required("Required")
|
||||
.test("no-e", "Invalid number", (value:any) => {
|
||||
if (value && /^[0-9]*$/.test(value) == false) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.min(11, "must be 11 digits")
|
||||
.max(11, "must be 11 digits"),
|
||||
first_name: Yup.string()
|
||||
.min(10, "must be 10 digits")
|
||||
.max(10, "must be 10 digits"),
|
||||
confirm_salary_acct: Yup.bool() // use bool instead of boolean
|
||||
.oneOf([true], "You must check the box"),
|
||||
qualification: Yup.string()
|
||||
.required("Required"),
|
||||
phone: Yup.string()
|
||||
doe: Yup.string()
|
||||
.required("BVN is required"),
|
||||
gl: Yup.string()
|
||||
.required("Required"),
|
||||
email: Yup.string()
|
||||
.required("Required")
|
||||
.email("Wrong email format"),
|
||||
surname: Yup.string()
|
||||
ippis: Yup.string(),
|
||||
employer_name: Yup.string()
|
||||
.required("Required"),
|
||||
dob: Yup.string()
|
||||
designation: Yup.string()
|
||||
.required("Required"),
|
||||
checked: Yup.bool(),
|
||||
checked: Yup.bool() // use bool instead of boolean
|
||||
.oneOf([true], "You must accept that the information here is correct"),
|
||||
});
|
||||
|
||||
|
||||
@@ -103,27 +97,30 @@ const EmployerValidation: React.FC= () => {
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full my-10">
|
||||
<p className="mb-1 text-[12px] font-bold">Confirms Employee's salary account number</p>
|
||||
<p className="mb-1 text-[12px] font-bold flex items-center gap-4">Confirms Employee's salary account number
|
||||
{(props.errors.salary_acct && props.touched.salary_acct) && <span className='text-[10px] text-red-500'>{props.errors.salary_acct}</span> }
|
||||
</p>
|
||||
<div className="w-full flex items-center gap-8">
|
||||
<InputCompOne
|
||||
parentClass="w-full max-w-[25rem]"
|
||||
// label="First Name"
|
||||
name="first_name"
|
||||
name="salary_acct"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||||
value={props.values.first_name}
|
||||
onChange={props.handleChange}
|
||||
error={(props.errors.first_name && props.touched.first_name) ? props.errors.first_name : ''}
|
||||
// error={(props.errors.first_name && props.touched.first_name) ? props.errors.first_name : ''}
|
||||
/>
|
||||
<input
|
||||
type='checkbox'
|
||||
name="checked"
|
||||
name="confirm_salary_acct"
|
||||
className='w-6 h-6 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded-lg focus:ring-purple-500'
|
||||
onChange={props.handleChange}
|
||||
/>
|
||||
</div>
|
||||
{(props.errors.confirm_salary_acct && props.touched.confirm_salary_acct) && <span className='text-[10px] text-red-500'>{props.errors.confirm_salary_acct}</span> }
|
||||
</div>
|
||||
|
||||
<div className="my-10">
|
||||
@@ -146,7 +143,7 @@ const EmployerValidation: React.FC= () => {
|
||||
<InputCompOne
|
||||
parentInputClass="w-full"
|
||||
parentClass="w-full md:max-w-[25rem]"
|
||||
name="title"
|
||||
name="qualification"
|
||||
label="Applicant's Educational Qualification"
|
||||
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||||
labelSpan={`(Please select the emplyee's highest qualification)`}
|
||||
@@ -154,22 +151,22 @@ const EmployerValidation: React.FC= () => {
|
||||
select={true}
|
||||
selectClass="w-full h-[36px] rounded-[6px]"
|
||||
selectOptions={titleOptions}
|
||||
selectValue={props.values.title}
|
||||
selectValue={props.values.qualification}
|
||||
onChange={props.handleChange}
|
||||
error={(props.errors.title && props.touched.title) ? props.errors.title : ''}
|
||||
error={(props.errors.qualification && props.touched.qualification) ? props.errors.qualification : ''}
|
||||
/>
|
||||
<InputCompOne
|
||||
parentClass="w-full md:max-w-[25rem]"
|
||||
label="Applicant's Date of Employment"
|
||||
name="dob"
|
||||
name="doe"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||||
input
|
||||
inputType='date'
|
||||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem] px-3"
|
||||
value={props.values.dob}
|
||||
value={props.values.doe}
|
||||
onChange={props.handleChange}
|
||||
error={(props.errors.dob && props.touched.dob) ? props.errors.dob : ''}
|
||||
error={(props.errors.doe && props.touched.doe) ? props.errors.doe : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -178,26 +175,26 @@ const EmployerValidation: React.FC= () => {
|
||||
<InputCompOne
|
||||
parentClass="w-full md:max-w-[25rem]"
|
||||
label="Applicant's Grade Level"
|
||||
name="first_name"
|
||||
name="gl"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||||
value={props.values.first_name}
|
||||
value={props.values.gl}
|
||||
onChange={props.handleChange}
|
||||
error={(props.errors.first_name && props.touched.first_name) ? props.errors.first_name : ''}
|
||||
error={(props.errors.gl && props.touched.gl) ? props.errors.gl : ''}
|
||||
/>
|
||||
<InputCompOne
|
||||
parentClass="w-full md:max-w-[25rem]"
|
||||
label="Applicant's IPPIS Number (optional)"
|
||||
name="phone"
|
||||
name="ippis"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||||
input
|
||||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||||
value={props.values.phone}
|
||||
value={props.values.ippis}
|
||||
onChange={props.handleChange}
|
||||
error={(props.errors.phone && props.touched.phone) ? props.errors.phone : ''}
|
||||
error={(props.errors.ippis && props.touched.ippis) ? props.errors.ippis : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -219,30 +216,30 @@ const EmployerValidation: React.FC= () => {
|
||||
<InputCompOne
|
||||
parentClass="w-full md:max-w-[25rem]"
|
||||
label="Employer's Name"
|
||||
name="first_name"
|
||||
name="employer_name"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||||
labelSpan={`(your full name)`}
|
||||
labelSpanClass='text-[10px]'
|
||||
input
|
||||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||||
value={props.values.first_name}
|
||||
value={props.values.employer_name}
|
||||
onChange={props.handleChange}
|
||||
error={(props.errors.first_name && props.touched.first_name) ? props.errors.first_name : ''}
|
||||
error={(props.errors.employer_name && props.touched.employer_name) ? props.errors.employer_name : ''}
|
||||
/>
|
||||
<InputCompOne
|
||||
parentClass="w-full md:max-w-[25rem]"
|
||||
label="Desgination"
|
||||
name="phone"
|
||||
label="Designation"
|
||||
name="designation"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||||
labelSpan={`(your position)`}
|
||||
labelSpanClass='text-[10px]'
|
||||
input
|
||||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||||
value={props.values.phone}
|
||||
value={props.values.designation}
|
||||
onChange={props.handleChange}
|
||||
error={(props.errors.phone && props.touched.phone) ? props.errors.phone : ''}
|
||||
error={(props.errors.designation && props.touched.designation) ? props.errors.designation : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user