Can someone help me to add validation to email field
I have white listed domain field it may have domains like (gmail.com, yopmail.com) The email field should only contain the domains mentioned in the domain field How can we do this?
Note: As we start entering the domains in the field it should start validating the email field domain.
Ex: if the Email field: lock@gmail.com
Domain field:
yopmail.com =>(as we start typing y o p it should validate these characters against email field domain i.e (gmail.com) and if not matching then should show error "domain not matching".
mail.com => (as we start typing m a i it should validate these characters against email field domain i.e (gmail.com) and should show error "domain not matching".
gmail.com => it should validate against email domain if matching then there should not be any error.
<div>
<label htmlFor="firstName" className="required flex">Email</label>
<FormikTextInput
name=contactEmail"
type="text"
placeholder="example.com"
/>
</div>
<div className="grid grid-cols-1 gap-x-8 pb-3">
<div className="mb-2 required flex">
White listed email domain address
</div>
<FieldArray name="EmailDomainlist">
{(filedArrayProps) => {
let {
push,
remove,
form: {
values: { EmailDomainlist },
},
} = filedArrayProps;
return EmailDomainlist.map((email, index) => (
<div key={index} className="flex mb-4">
<FormikTextInput
name={`EmailDomainlist[${index}]`}
type="text"
placeholder="example.com"
list={EmailDomainlist}
/>
<img
className="cursor-pointer ml-3"
onClick={() => push("")}
src={plusIcon}
alt="plus icon"
/>
{index > 0 ? (
<img
className="cursor-pointer ml-3"
src={deleteIcon}
onClick={() => remove(index)}
alt="delete icon"
/>
) : null}
</div>
));
}}
</FieldArray>
</div>
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/7FF7W.png