// Check if primaryEmail and secondaryEmail are same
if (primaryEmail === secondaryEmail && primaryEmail !== '' && secondaryEmail !== '') {
errors.primaryEmail = 'Primary and Secondary email cannot be the same';
errors.secondaryEmail = 'Primary and Secondary email cannot be the same';
}
// Check if primaryMobileNumber and secondaryMobileNumber are same
if (primaryMobileNumber === secondaryMobileNumber && primaryMobileNumber !== '' && secondaryMobileNumber !== '') {
errors.primaryMobileNumber = 'Primary and Secondary mobile number cannot be the same';
errors.secondaryMobileNumber = 'Primary and Secondary mobile number cannot be the same';
}
<div className="col-md-6">
<label htmlFor="email" className="form-label w-100 email-label">
Primary Email*
</label>
// primary email
<input
type="email"
className={`form-control email-input ${formErrors.primaryEmail ? 'input-error' : ''}`}
id="email"
placeholder="abc@babc.com"
defaultValue={userData.primaryEmail}
onChange={(e) => setPrimaryEmail(e.target.value)}
{...register('primaryEmail', {
required: true,
})}
/>
{
primaryEmail === secondaryEmail
&& primaryEmail !== ''
&& secondaryEmail !== ''
&& (
<div className="error-message">
{formErrors.primaryEmail}
</div>
)
}
</div>
// secondary email
<input
type="email"
className={`form-control secondary-email-input ${formErrors.secondaryEmail ? 'input-error' : ''}`}
id="secondary-email"
placeholder="secondary@abc.com"
defaultValue={userData.secondaryEmail}
// onchange
onChange={(e) => setSecondaryEmail(e.target.value)}
// register
{...register('secondaryEmail', {
required: true,
})}
/>
{formErrors.secondaryEmail && <div className="error-message mt-1">{formErrors.secondaryEmail}</div>}
// primary mobile number
<input
type="text"
className={`form-control mobile-input ${formErrors.primaryMobileNumber ? 'input-error' : ''}`}
id="mobile"
placeholder="XXXXXXXXXXXXXX"
defaultValue={userData.primaryMobileNumber}
onInput={(e) => {
const input = e.target as HTMLInputElement;
input.value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
setPrimaryMobileNumber(input.value);
}}
{...register('primaryMobileNumber', {
required: true,
})}
/>
// secondary mobile number
<input
type="text"
className={`form-control secondary-mobile-input ${formErrors.secondaryMobileNumber ? 'input-error' : ''}`}
id="secondary-mobile"
placeholder="XXXXXXXXXXX"
defaultValue={userData.secondaryMobileNumber}
onInput={(e) => {
const input = e.target as HTMLInputElement;
const value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
input.value = value;
setSecondaryMobileNumber(value);
}}
{...register('secondaryMobileNumber', {
required: true,
})}
/>
{/* {
primaryMobileNumber === secondaryMobileNumber
&& primaryMobileNumber !== ''
&& secondaryMobileNumber !== ''
&& (
<div className="error-message mt-1">
{formErrors.primaryMobileNumber}
</div>
)
} */}
</div>
{
formErrors.secondaryMobileNumber
&& (
<div
className="error-message mt-1"
>
{formErrors.secondaryMobileNumber}
</div>
)
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter