Проверка формы с помощью React

Question

Я пытаюсь создать форму регистрации пользователя и наталкиваюсь на контрольно-пропускной пункт с отображением ошибок проверки формы.

Проблемы: 1) Вход больше не отправляет (ax ios) в БД при отправке для входов, которые не имеют ошибок 2) Сообщение об ошибке не go прочь после исправления ошибки.

Примечание: я закомментировал firstNameError, lastNameError и emailError, чтобы сосредоточиться только на passwordError.

import React, { Component } from 'react';
import axios from 'axios';
import { Form, Container } from 'react-bootstrap'

export default class RegisterUser extends Component {
  constructor(props) {
    super(props);

    this.onChangeFirstName = this.onChangeFirstName.bind(this);
    this.onChangeLastName = this.onChangeLastName.bind(this);
    this.onChangeEmail = this.onChangeEmail.bind(this);
    this.onChangePassword = this.onChangePassword.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      firstNameError: '',
      lastNameError: '',
      emailError: '',
      passwordError: '',
    }
  }

  onChangeFirstName(e) {
    this.setState({
      firstName: e.target.value
    })
  }

  onChangeLastName(e) {
    this.setState({
      lastName: e.target.value
    })
  }

  onChangeEmail(e) {
    this.setState({
      email: e.target.value
    })
  }

  onChangePassword(e) {
    this.setState({
      password: e.target.value
    })
  }

  validate() {
    // let firstNameError= '';
    // let lastNameError= '';
    //  let emailError= '';
    let passwordError = '';

    if (!this.state.password.length < 6) {
      passwordError = 'Password must be at least 6 characters'
    }

    if (passwordError) {
      this.setState({ passwordError })
      return false
    }

    return true;
  }

  onSubmit(e) {
    e.preventDefault();
    const isValid = this.validate()
    if (isValid) {
      const user = {
        firstName: this.state.firstName,
        lastName: this.state.lastName,
        email: this.state.email,
        password: this.state.password,
      }

      console.log(user);

      axios.post('http://localhost:5001/users/add', user)
        .then(res => console.log(res.data));

      this.setState({
        firstName: '',
        lastName: '',
        email: '',
        password: ''
      })
    }
  }

  render() {
    return (
      <Container>
        <h3>Register</h3>
        <Form onSubmit={this.onSubmit}>
          <Form.Group>
            <Form.Label>First name</Form.Label>
            <Form.Control
              type="text"
              id="firstName"
              required
              value={this.state.firstName}
              onChange={this.onChangeFirstName}
            />
            <div style={{ color: 'red' }}>
              {this.state.firstNameError}
            </div>
          </Form.Group>
          <Form.Group>
            <Form.Label>Last name</Form.Label>
            <Form.Control
              id="lastName"
              type="text"
              required
              value={this.state.lastName}
              onChange={this.onChangeLastName}
            />
          </Form.Group>
          <div style={{ color: 'red' }}>
            {this.state.lastNameError}
          </div>
          <Form.Group>
            <Form.Label>Email</Form.Label>
            <Form.Control
              type="email"
              id="email"
              required
              value={this.state.email}
              onChange={this.onChangeEmail}
            />
          </Form.Group>
          <div style={{ color: 'red' }}>
            {this.state.emailError}
          </div>
          <Form.Group>
            <Form.Label>Password</Form.Label>
            <Form.Control
              type="password"
              id="password"
              required
              value={this.state.password}
              onChange={this.onChangePassword}
            />
          </Form.Group>
          <div style={{ color: 'red' }}>
            {this.state.passwordError}
          </div>
          <Form.Group>
            <Form.Control
              type="submit"
              value="Register"
              className="btn btn-primary"
            />
          </Form.Group>
        </Form>
      </Container>
    )
  }
}

Answer 1

Сообщение об ошибке не сбрасывается вашим кодом при проверке. Если пароль действителен, его следует сбросить с помощью:

this.setState({ passwordError: '' })

Я ошибочно предположил, что if(passwordError) вернет true для пустой строки, но это не так. Если вы сможете отлаживать свой код в браузере с помощью инструментов разработчика, вы сможете понять, почему правильный контент не публикуется. Это может быть результатом использования константы для допустимого флага.

Answer 2

Нашел проблему. Одна часть была на бэкэнде, а другая была в коде исходного сообщения, где у меня был восклицательный знак в ошибке подтверждения пароля, которого не должно было быть.

if (!this.state.password.length < 6) {
  passwordError = 'Password must be at least 6 characters'
}

Сработало, когда я изменил его на:

if (this.state.password.length < 6) {
  passwordError = 'Password must be at least 6 characters'
}