Проверка правильности поля электронной почты начальной загрузки onChange - PullRequest
Новая
       43

Проверка правильности поля электронной почты начальной загрузки onChange

0 голосов
/ 04 ноября 2019

У меня есть форма с полем электронной почты и паролем. Я хочу, чтобы это поле электронной почты проверяло поле onChange и пароль для проверки при отправке. С текущей реализацией поле пароля также проверяется при изменении поля электронной почты. Как я могу это исправить?

код 

<Form noValidate validated={validated} onSubmit={this.handleSubmit}>
                    <Form.Group controlId="formEmail" style={{ marginBottom: '32px' }}>
                        <Form.Label className="label_type2">Email address</Form.Label>
                        <Form.Control type="email" className="input_text" onChange={this.emailValidator} placeholder="Enter email" required />
                    </Form.Group>

                    <Form.Group controlId="formPassword" style={{ marginBottom: '32px' }}>
                        <Form.Label className="label_type2">Password</Form.Label>
                        <Form.Control type="password" className="input_text" placeholder="Password" required />
                        <Form.Control.Feedback type="invalid" className='invalid_form_err cp' >
                            <span onClick={() => this.props.history.push('/forgot_password')}>Forgot your password?</span>
                        </Form.Control.Feedback>
                    </Form.Group>

                    <Button type="submit" size="lg" variant="light" className="btn_type1" id="button_primary_clr" style={{ marginBottom: '32px', width: '110px' }}>
                        {login.regLoading === true ? <Spinner /> : <div>Login<Image src={RightArrowW} className="ml-2" /></div>}
                    </Button>

                    <p className='label_type2' id='text_hover_effect' onClick={this.regManual.bind(this)}>Don't have an account? Register now.</p>
                </Form>


  handleSubmit = event => {
        const { loggingUser } = this.props;
        const form = event.currentTarget;
        event.preventDefault();
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        } else {
            const loggingData = {
                "eMail": event.target.formEmail.value,
                "password": event.target.formPassword.value,
            }
            loggingUser(loggingData);
        }
        this.setState({
            validated: true
        })
    };

    emailValidator  = event =>{
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        }
        this.setState({
            validated: true
        })
    }
...