const handleMobileNumberValidation = (phone: string) => { // const mobileNumberRegex = /^[+0-9\s]*$/; // const mobileNumberRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/; const mobileNumberRegex = /^(?:[0-9] ?){6,14}[0-9]$/; return mobileNumberRegex.test(phone); }; if (primaryMobileNumber.trim() !== '') { if (!handleMobileNumberValidation(primaryMobileNumber)) { errors.primaryMobileNumber = 'Invalid mobile number'; } } <div className="col-md-6"> <label htmlFor="mobile" className="form-label w-100 mobile-label"> Primary Mobile Number* </label> <div className="d-flex"> {/* autocomlete field for isdcodelist */} <Autocomplete disablePortal id="isdcodelist" options={isdCodesList} isOptionEqualToValue={(option: any, value: any) => option.label === value.label} renderInput={(params) => ( <TextField {...params} {...register('isdCode', { required: true, })} className="isd-code-input" placeholder="+971" /> )} renderOption={(props, option) => ( <span className="phone-number-option" {...props} > {option.countryName} </span> )} // onchange event handler to set the isdCode state onChange={(e, value: any) => setIsdCode( value?.label, )} /> <input type="text" className="form-control mobile-input" id="mobile" placeholder="XXX XXX XXXX" // onchange onChange={(e) => setPrimaryMobileNumber(e.target.value)} {...register('primaryMobileNumber', { required: true, })} /> </div> {/* handle errors */} {formErrors.primaryMobileNumber && ( <span className="error-message">{formErrors.primaryMobileNumber}</span> )} </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