inputRef is the number that I am entering into the input box. it only consists of numbers without country code. first of all I have to choose or type country code and it is gonna be done by . What I am trying to do is that by using regular expressions how I can check if the number is correct for each country individually. I do not know how I have to merge countrycode and phone number from entered value by user and then check it all together. Lets say if it is for United States it has to validate number by US number, if it is for Switzerland it has to check it for Switzerland. I am able to add general regular expression by using pattern:// but I do not know how I can do it for each country separately. in the given code it only tests input with country code but it should not do it because country code has to be taken into consideration from CountryCodeSelector and then regex has to check it. I know this problem is not that much easy but can someone help me to solve it ? Thanks in advance
<div className={classes.phoneInputs} id="phone">
<FormControl className={classes.phoneSuffix}>
<Controller
name="phoneSuffix"
control={control}
render={({ onChange, value }) => (
<CountryCodeSelector value={value} onChange={onChange} />
)}
/>
</FormControl>
<Input
inputRef={register({
required:true,
pattern:/^\+(?:[0-9] ?){6,12}[0-9]$/im
})}
name="phone"
placeholder="XXX XXX XXX"
className={classes.phoneInput}
error={!!errors?.phone}
onBlur={handleBlurPhone}
data-test="form-phone"
/>
</div>
I am adding some photos here to express the issue much more detailed:
[![without anything][1]](https://i.stack.imgur.com/BuGJI.png)
[regex has to take into consideration that country code is there already and it should not work and has to give error but it is not giving error![][3]](https://i.stack.imgur.com/WGJdo.png)