Form Validation not working using react and StepWizard

Question

Can someone explain why this validation is not working properly? When I click the submit button I should check to see if the field is empty, if it is it should display the error and prevent the next page. If the form has been filled in, then no message should display and clicking the button will take you to a new screen. Currently, the error displays whether or not the field is filled in and the page does not advance in either case.

import React, { Component } from 'react'

const intialState = {
    account: "",
    accountError: ""
};

export class LandingPage extends Component {
    state = intialState;

    handleChange = event => {
        this.setState({
        })
    }
    
    continue = e => {
        e.preventDefault();
        this.props.nextStep();
    }
   
    validate = () => {
        let accountError= "";

        if (!this.state.name) {
            accountError = "You must enter an account number!";
          }

        if (accountError) {
            this.setState({ accountError });
            return false;
        }

        return true;
    };

    handleSubmit = event => {
        event.preventDefault();
        const isValid = this.validate();
        if (isValid) {
            console.log(this.state);
            this.setState(intialState);
        }
    };
    
    previous = e => {
        e.preventDefault();
        this.props.previousStep();
    }

    render() {
        const { values } = this.props;
        const { errors } = this.props;
        
    
    return (
        <div>
            <h1>Enter an account number</h1>
            <input
            type="text" 
            required="required" 
            placeholder="Enter Account Number"
            autoComplete='off'>
            </input>
                <div className="footer">
                    <button onClick={this.validate}>Submit</button>
                </div>
                <div>
                     {this.state.accountError}
                </div>
        </div>
    )
  }
}

export default LandingPage;

Answer 1

The issue is that the name in the state was not getting any value. Fix it like below.

1. Change the initialState to have the name field

const intialState = {
  ...
  ...
  name: ""
};

2. handleChange needs to set the value from the event.

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };

3. Update the validate function to handle the case when input is typed.

  validate = () => {
    let accountError = "";

    if (!this.state.name) {
      accountError = "You must enter an account number!";
    }

    if (accountError) {
      this.setState({ accountError });
      return false;
    }

    this.setState({ accountError: "" });
    return true;
  };

4. Add the handleChange as the onChange to the input element.

<input
  ...
  ...
  ...
  name="name"
  onChange={this.handleChange}
></input>

Working Example