我有一个简单的表单,其中包括一个电子邮件字段和密码字段,如下所示
<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>
我想包括引导形式验证的电子邮件字段时,用户开始键入电子邮件地址和验证的密码字段时,提交按钮被按下。
我的方法如下。
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
})
}
但是当我开始在email地址字段中输入时,两个验证都触发并显示红色边框。我怎么能只在用户开始输入email地址时才触发对email地址的引导验证呢?
1条答案
按热度按时间9w11ddsr1#
你应该试试这个 Bootstrap 和一些js,不要忘记包括 Bootstrap css。
x一个一个一个一个x一个一个二个x