Я использую большую библиотеку проверки - Признак для формы входа, которую я создаю.
Тем не менее, происходит нежелательное поведение; По сути, ошибка поля пароля начинает появляться или отображаться в пользовательском интерфейсе до того, как I fini sh введет поле ввода адреса электронной почты / имени пользователя;
Это функция проверки:
export function validateInputs(
formType,
username,
usernameError,
setUsernameError,
setUsername,
usernameFeedback,
setUsernameFeedback,
password,
passwordError,
passwordFeedback,
setPasswordFeedback,
setPassword,
formSuccess,
setFormSuccess,
formError,
setFormError,
disableButton,
setDisableButton
) {
var data = {
username: username,
password: password
};
var schema = {
username: 'required|email',
password: 'required|min:7|max:11'
};
function getFormValidation(formType) {
function isConfirmation() {
/* non relevant code */
}
function isLogin() {
validate(data, schema, messages)
.then(success => {
if (success) {
setUsernameError(false);
setPasswordError(false);
setDisableButton(false);
}
})
.catch(errors => {
console.log('errors ', errors);
if (errors[0].field === 'username') {
let { message } = errors[0];
setUsernameError(true);
setUsernameFeedback(message);
}
if (errors[0].field === 'password') {
let { message } = errors[0];
setPasswordError(true);
setPasswordFeedback(message);
}
});
}
var Forms = {
Confirmation: isConfirmation,
Login: isLogin
};
Forms[formType]();
}
return getFormValidation(formType);
}
И это компонент формы:
function FormComponent({
formType,
match,
isLoggedIn,
accountVerified,
userHasBeenVerified,
resetCountNotVerified
}) {
function isLoginForm() {
console.log('formType; ', formType);
console.log('disableButton ', disableButton);
return (
<div className="login-form">
{' '}
{}
<style>
{`body > div, body > div > div, body > div > div > div.login-form { height: 100%;}`}{' '}
</style>
<Grid textAlign="center" style={{ height: '100%' }} verticalAlign="middle">
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="green" textAlign="center">
Log-in to your account
</Header>
<Form
size="large"
onSubmit={e => handleSubmit(e, formType)}
error={formError}
>
<Segment stacked>
<Form.Input
fluid
icon="user"
iconPosition="left"
placeholder="E-mail address, e.g. joe@schmoe.com"
name="username"
value={username}
onChange={e => handleChange(e)}
error={usernameError}
/>
<Transition visible={usernameError} animation="scale" duration={duration}>
<Message error content={usernameFeedback} />
</Transition>
<Form.Input
fluid
icon="lock"
iconPosition="left"
placeholder="Password"
name="password"
type="password"
value={password}
onChange={e => handleChange(e)}
error={passwordError}
/>
<Transition visible={passwordError} animation="scale" duration={duration}>
<Message error content={passwordFeedback} />
</Transition>
<Button color="green" fluid size="large" disabled={disableButton}>
Log-in
</Button>
<br />
<Link to="/forgot_password">Forgot password?</Link>
<Transition
visible={accountVerified === false ? true : false}
unmountOnHide={true}
animation="scale"
duration={duration}
>
{isLoading ? (
<Dimmer active inverted>
<Loader />
</Dimmer>
) : (
<Message
color="yellow"
centered="true"
header={responseMessage[0]}
content={responseMessage[1]}
/>
)}
</Transition>
<Transition
visible={formError}
unmountOnHide={true}
animation="scale"
duration={duration}
>
{isLoading ? (
<Dimmer active inverted>
<Loader />
</Dimmer>
) : (
<Message
error
centered="true"
header={responseMessage[0]}
content={responseMessage[1]}
/>
)}
</Transition>
<Transition
visible={formSuccess}
unmountOnHide={true}
animation="scale"
duration={duration}
>
{isLoading ? (
<Dimmer active inverted>
<Loader />
</Dimmer>
) : (
<Message
success
header={responseMessage[0]}
content={responseMessage[1]}
/>
)}
</Transition>
</Segment>
</Form>
{formError ? (
<Transition visible={formError} animation="scale" duration={1000}>
{isLoading ? (
<Dimmer active inverted>
<Loader />
</Dimmer>
) : (
<Message>
<Link to="/register">Register</Link>{' '}
</Message>
)}
</Transition>
) : null}
</Grid.Column>{' '}
</Grid>{' '}
</div>
);
}
var Forms = {
Login: [isLoginForm, loginSubmit],
}
var [fadeUp, setFadeUp] = useState('fade up');
var [duration, setDuration] = useState(500);
var [name, setName] = useState('');
var [username, setUsername] = useState('');
var [usernameFeedback, setUsernameFeedback] = useState('');
var [usernameError, setUsernameError] = useState(false);
var [userNameDup, setUserNameDup] = useState(false);
var [password, setPassword] = useState('');
var [passwordFeedback, setPasswordFeedback] = useState('');
var [passwordError, setPasswordError] = useState(false);
var [password_confirmation, setPasswordConfirmation] = useState('');
var [passwordConfirmationError, setPasswordConfirmationError] = useState(false);
var [passwordConfirmationFeedback, setPasswordConfirmationFeedback] = useState('');
var [formSuccess, setFormSuccess] = useState(false);
var [formError, setFormError] = useState(false);
var [disableButton, setDisableButton] = useState(true);
var [isLoading, setIsLoading] = useState(false);
var [responseMessage, setResponseMessage] = useState({});
var [tokenExpired, setTokenExpired] = useState(false);
var [responseCodeSuccess, setResponseCodeSuccess] = useState(false);
var [error, setError] = useState(false);
function handleChange(e) {
console.log('e ', e);
e.persist();
if (e.target.name === 'username') {
console.log('username', e.target.name);
setUsername(e.target.value);
}
if (e.target.name === 'password') {
console.log('password', e.target.name);
setPassword(e.target.value);
}
validateInputs( formType,
username,
usernameError,
setUsernameError,
setUsername,
usernameFeedback,
setUsernameFeedback,
password,
passwordError,
passwordFeedback,
setPasswordFeedback,
setPassword,
formSuccess,
setFormSuccess,
formError,
setFormError,
disableButton,
setDisableButton
);
}
function handleSubmit(event, formType) {
event.preventDefault();
return Forms[formType][1]();
}
return Forms[formType][0]();
}
Я думаю, что эти условия помешают это, но они не ... Любая помощь будет оценена:
.catch(errors => {
console.log('errors ', errors);
if (errors[0].field === 'username') {
let { message } = errors[0];
setUsernameError(true);
setUsernameFeedback(message);
}
if (errors[0].field === 'password') {
let { message } = errors[0];
setPasswordError(true);
setPasswordFeedback(message);
}
});