const [formErrors, setFormErrors] = useState<Partial<UserRegistrationFormAddressInfoDetails>>({ address: '', countryName: '', nationalityName: '', cityName: '', passportNo: '', passportExpiryDate: '', // nationality: '', resident: '', companyAdd: '', }); handleEmptyField('passportNo', userData.passportNumber || passportNo, 'Passport No is required'); useEffect(() => { if (passportNo) { setFormErrors((prevErrors) => ({ ...prevErrors, passportNo: '' })); } }, [passportNo]); <input type="text" className={`form-control passport-number-input ${formErrors.passportNo ? 'input-error' : ''}`} id="passportNumber" placeholder="Enter Your Passport Number" defaultValue={userData.passportNumber} maxLength={12} onChange={(e) => { setPassportNo(e.target.value); if (e.target.value) { setFormErrors((prevErrors) => ({ ...prevErrors, passportNo: '' })); } }} onInput={(e) => { const input = e.target as HTMLInputElement; input.value = input.value.replace(/[^a-zA-Z0-9 ]/g, ''); setPassportNo(input.value); }} {...register('passportNo', { required: true, })} />
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