Tengo un formulario simple que consiste en un campo de correo electrónico y campo de contraseña como sigue

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

Quiero incluir la validación del formulario de arranque en el campo de correo electrónico cuando el usuario comienza a escribir la dirección de correo electrónico y la valiadación en el campo de contraseña cuando se presiona el botón enviar.

Mi enfoque fue el siguiente.

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

Pero cuando empiezo a escribir en el campo de dirección de correo electrónico, ambas las validaciones se activan y muestran el borde rojo. ¿Cómo puedo activar la validación de arranque para la dirección de correo electrónico solo cuando el usuario comienza a escribir la dirección de correo electrónico.

0
CraZyDroiD 4 nov. 2019 a las 16:16

1 respuesta

Usted debe probar este formulario de arranque y algunos js y no se olvide de incluir Bootstrap css.

<.link rel-"stylesheet" href-"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity-"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin"anónimo">

(function() {
			'use strict';
			window.addEventListener('load', function() {
			var forms = document.getElementsByClassName('f-validation');
			var validation = Array.prototype.filter.call(forms, function(form) {
			form.addEventListener('submit', function(event) {
			if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
			}
			form.classList.add('was-validated');
			}, false);
			});
			}, false);
			})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


			<div class="container mt-2">
				<form class="f-validation" novalidate>
					<div class="form-row">
						<div class="col-md-12 mb-3">
							<label for="validationCustomUsername">Email address</label>
							<div class="input-group">
								<input type="email" class="form-control" id="validationCustomUsername" placeholder="Username"
								aria-describedby="inputGroupPrepend" required>
								<div class="invalid-feedback">
									Please enter valid email id.
								</div>
							</div>
						</div>
					</div>
					<div class="form-row">
						<div class="col-md-12 mb-3">
							<label for="validationCustom03">Password</label>
							<input type="password" class="form-control" id="validationCustom03" placeholder="Password" required>
							<div class="invalid-feedback">
								Please enter password.
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="form-check">
							<input class="" type="checkbox" value="">
							<label class="">
								Remember me.
							</label>
						</div>
					</div>
					<button class="btn btn-primary btn-sm" type="submit">Submit form</button>
				</form>
			</div>
0
Navneet Maurya 5 nov. 2019 a las 13:31
58694231