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.
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>
Nuevas preguntas
twitter-bootstrap
Bootstrap es un marco front-end diseñado para impulsar el desarrollo de aplicaciones y sitios web. Para preguntas relacionadas con una versión de Bootstrap, utilice también la etiqueta de la versión específica de las etiquetas "twitter-bootstrap-2", "twitter-bootstrap-3" y "bootstrap-4".