J'ai un formulaire simple qui se compose d'un champ de courrier électronique et d'un champ de mot de passe comme suit

          <Form noValidate validated={validated} onSubmit={this.handleSubmit}>

                    <Form.Group controlId="formEmail">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email" onChange={this.emailValidator} placeholder="Enter email" required />
                    </Form.Group>

                    <Form.Group controlId="formPassword">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password"placeholder="Password" required />
                    </Form.Group>

                    <Button type="submit" size="lg" variant="light">
                     Login
                    </Button>


         </Form>

Je veux inclure la validation du formulaire d'amorçage dans le champ e-mail lorsque l'utilisateur commence à taper l'adresse e-mail et la valiadation dans le champ mot de passe lorsque le bouton Soumettre est enfoncé.

Mon approche était la suivante.

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
        })
    }

Mais lorsque je commence à taper dans le champ d'adresse e-mail, les validations se déclenchent et affichent la bordure rouge. Comment puis-je déclencher la validation d'amorçage pour l'adresse e-mail uniquement lorsque l'utilisateur commence à saisir l'adresse e-mail.

0
CraZyDroiD 4 nov. 2019 à 16:16