Closed harshdasila closed 2 days ago
It also works with phone number. so, email only validation doesn't sounds too good.
It might be rare but there are people who login with their phone number
For number also although it check for the type number but we can enter more than 10 digits and it still sends out the request.
then a frontend validation would be fine for phone number then
I have came up with the solution for this issue.
function isValidEmailOrPhone(value: string) {
const phRegEx = new RegExp(
'^(\\+\\d{1,2}\\s?)?\\(?\\d{3}\\)?[-.\\s]?\\d{3}[-.\\s]?\\d{4}$',
);
const emRegEx = new RegExp(
'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$',
);
setEmailValidationError(!phRegEx.test(value) && !emRegEx.test(value));
}
const debouncedEmailOrPhoneValidation = React.useCallback(debounce(isValidEmailOrPhone, 500),[]);
onChange={(e) => {
setRequiredError((prevState) => ({
...prevState,
emailReq: false,
}));
debouncedEmailOrPhoneValidation(e.target.value);
email.current = e.target.value;
}}
+XX (XXX) XXX-XXXX
+XX XXX-XXX-XXXX
(XXX) XXX-XXXX
XXX-XXX-XXXX
XXX.XXX.XXXX
XXX XXX XXXX
john.doe@example.com
jane_doe123@example.co.uk
alice+bob@example.net
user%example@example.org
johnny@example.travel
Please update me if you have any suggession for this solution.
https://github.com/code100x/cms/assets/108384868/72c05da6-3f09-45a5-93f7-50e812491cff
We have some users that dont follow any format so wil have to skip this one altho its a good one
Hi @hkirat I have made the changes for this enhancement
The demo video has been attached for your reference
Thanks login.webm
Shall I push the changes ?
Hi @hkirat I have made the changes for this enhancement
- Added react-hook-form in login component
- Added email validation regex that is /^[^\s@]+@[^\s@]+.[^\s@]+$/
- Marked Email and Password as required field
The demo video has been attached for your reference
Thanks login.webm
Shall I push the changes ?
Yooo... Watch his reply.
We Can also disable the login button until both email and password fields are valid. In this way we can avoid un necessary api call for invalid credentials. Forcing user to put valid credentials then only login
@Pratish10 read the thread again!!! It's not as simple as adding validation for email.
@SujithThirumalaisamy , Would like to know if gmail signin/signup would be a good enhancement ?
@SujithThirumalaisamy , Would like to know if gmail signin/signup would be a good enhancement ?
It might be. IMO.
During login even if i enter a invalid email address it still processes the request. The same issue is with the 100xdevs website too on email and mobile number for otp we can add frontend validations for those feilds. For this we can use react hook forms or just using some variable.