Я использую форму реакции-финала для создания форм регистрации и входа. Я создал файл с именем validators с 3-мя функциями: required, enabledEmails и validatePassword length. Затем я использовал их в своих полях с validate={required} или validate={this.composeValidators(required, validatePasswordLength)}, если я хотел использовать более двух валидаторов для своих полей.
У меня есть 5 полей: FirstName, LastName, Username, Email и password. В начале, когда поля пусты, все работает хорошо. Все они показывают ошибку:
«Это поле обязательно для заполнения»
, но когда я пытаюсь ввести какое-то значение в определенном поле, ошибка для этого поля все еще остается.
Вот ссылка на песочницу для моего проекта https://codesandbox.io/s/forma-ktvjq
Это функции в моем файле валидаторов:
export function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
export const required = v => {
if(!v || v === ' '){
return 'This field is requireddd';
}
return undefined;
}
export const allowedEmails = v =>{
if (v === validateEmail) {
return "email is not valid";
}
return undefined;
};
export const validatePasswordLength = v => {
if(v){
if(v.length<8){
return "Password has to be atleast 8 charachters";
}
return "Password accepted";
}
import validators, { required, validatePasswordLength, allowedEmails, validateEmail } from '../../validators';
import LoginForm from '../LoginForm';
// import Container from 'react-bootstrap/Container';
// import Row from 'react-bootstrap/Row';
// import Col from 'react-bootstrap/Col';
import React, { Component } from 'react';
import { Form, Field } from 'react-final-form';
import { InputPassword, InputEmail, InputUsername, InputFirstName, InputLastName, InputField} from '../.././../components/InputFields';
import Button from 'react-bootstrap/Button'
import { metaProperty } from '@babel/types';
import { withRouter } from 'react-router-dom';
class RegisterForm extends Component {
sleep = ms => new Promise(res => setTimeout(res, ms));
newPage = (newPage) => {
this.props.history.push('/login');
};
handleSubmit = async (values,e) => {
e.preventDefault()
await this.sleep(300);
console.log("values", values);
this.newPage();
};
composeValidators = (...validators) => value => validators.reduce((error, validator) => error || validator(value), undefined);
render(){
return (
<div>
<h1>? Register Form</h1>
<br>
</br>
<br></br>
<Form
onSubmit={this.handleSubmit.bind(this)}
render={ ( { handleSubmit, values, submitting, meta }) => (
<form onSubmit={handleSubmit}>
<Field
name="firstName"
component={InputField}
hintText="First Name"
floatingLabelText="First Name"
validate={required}
type="text"
/>
<Field
name="lastName"
component={InputField}
hintText="Last Name"
floatingLabelText="Last Name"
validate={required}
type="text"
/>
<Field
name="username"
component={InputField}
hintText="UserName"
floatingLabelText="username"
validate={required}
type="text"
/>
<Field
name="password"
component={InputField}
hintText="Password"
floatingLabelText="Password"
validate={this.composeValidators(required, validatePasswordLength)}
type="password"
/>
<Field
name="email"
component={InputField}
hintText="email"
floatingLabelText="Email"
validate={this.composeValidators(required, allowedEmails)}
type="email"
/>
<Button size="lg" type="submit">Register</Button>
</form>
) } />
</div>
);
};
}
export default RegisterForm;
Здесь также находится мой сторонний компонентчто я использую в поле в качестве компонента.
import { Form, Field } from 'react-final-form';
import LoginForm from '../containers/forms/LoginForm';
import RegisterForm from '../containers/forms/RegisterForm';
import './InputFields.css'
export const InputField = (props) => {
console.log("PROOOPS ", props);
return(
<div>
<InputGroup size="lg" className="mb-4">
<FormControl
placeholder={props.floatingLabelText}
type={props.input.type}
/>
</InputGroup>
<div className="ValidatorStyle" >
{props.meta.error && props.meta.touched && <span>{props.meta.error}</span>}
</div>
</div>
)}
Я не получаю никакой ошибки, но значение поля не обновляется.