How can i validate input field in react using regular expression via hooks

Question

I am trying to validate input using hooks but facing a problem as I want that if users leave the email blank and go to password then I want to show a message that email can't be empty also want to check using a regex that email is valid or not if now show email invalid but I am not able to see the email error message in the return. Any help would be appreciated.

I am pretty new to react hooks.

export default function SignInForm() {
    const [email, setEmail] = useState(null);
    const [password, setlPassword] = useState(null);
    const [emailError, setEmailError] = useState(null);

    const emailValidation = (e) => {
         setEmail(e.target.value)
        if(!email){
            setEmailError('Enter a Email Address')
        }
    }
    console.log(emailError,"emailerror")
    const { t } = useTranslation();
    return (
        <Form fontColor={(props) => props.theme.colors.grey.base}>
            <label>{t('E-mail')}</label>
            <Input
                id={'email'}
                type={'email'}
                onChange={emailValidation}
            />
            <Status>{emailError}</Status>
            <label>{t('Password')}</label>
            <Input
                id={'password'}
                type={'password'}
                onChange={(e) => setlPassword(e.target.value)}
            />
            <Column>
                <ForgetText>{t('Forgotten')}</ForgetText>
            </Column>
            <Button themeBlue width={'336px'} onClick={() => onSubmit()}>
                {t('Sign In')}
            </Button>
</Forms>

@spycbanda i havent use any library for form used simple input and form and onSubmit — Avinash jain
– Avinash jain, Commented Aug 23, 2020 at 13:05

Ravi Garg · Accepted Answer · 2020-08-23 13:16:13Z

1

export default function SignInForm() {
    const [email, setEmail] = useState('');
    const [password, setlPassword] = useState('');
    const [emailError, setEmailError] = useState('');

    const emailValidation = (e) => {
        const tempEmail = (e && e.target && e.target.value) || e;
        setEmail(tempEmail);
        const re = /\S+@\S+\.\S+/;
        const isValidEmail = re.test(String(tempEmail).toLowerCase());
        if(!tempEmail){
            setEmailError('Enter a Email Address')
        } else if(!isValidEmail) {
            setEmailError('Enter a Valid Email')
        }
    }
    console.log(emailError,"emailerror")
    const { t } = useTranslation();
    return (
        <Form fontColor={(props) => props.theme.colors.grey.base}>
            <label>{t('E-mail')}</label>
            <Input
                id={'email'}
                type={'email'}
                onChange={emailValidation}
            />
            <Status>{emailError}</Status>
            <label>{t('Password')}</label>
            <Input
                id={'password'}
                type={'password'}
                onChange={(e) => {setlPassword(e.target.value); emailValidation(email);}}
            />
            <Column>
                <ForgetText>{t('Forgotten')}</ForgetText>
            </Column>
            <Button themeBlue width={'336px'} onClick={() => onSubmit()}>
                {t('Sign In')}
            </Button>
</Forms>

answered Aug 23, 2020 at 13:16

Ravi Garg

1,5421 gold badge14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Avinash jain Over a year ago

once error message displayed when i add a valid email them still the error message resides there

Collectives™ on Stack Overflow

How can i validate input field in react using regular expression via hooks

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related