ReactJS 如何验证所有输入然后提交

Question

I'm working on a form in ReactJS , I have multiple input (in fiddle it's just a demo, it's about 10-15 inputs in real code) I want to validate all inputs and if all are valid then submit/POST to api, what I tried so far is this JSFiddle

handleChange = (e) => {
  if (e.target.value.length >= 5) {
    this.setState({
      submit: true
    })
  } else {
    this.setState({
      submit: false
    })
  }
}

So, for do this, I define a state called submit , if submit is true , form going to submit and call api . the problem is if user fill and valid one of the inputs, submit set to true , but I want when user valid all inputs then submit should set to true .

Answer 1

You should have component state to manage the validation of input. Below is my code that I used yours and have my edit:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      submit: false,
      isValid: {
        "1": false,
        "2": false,
        "3": false,
        "4": false,
        "5": false
      }
    };
  }

  handleSubmit = e => {
    e.preventDefault();
    if (this.state.submit) {
      alert("POSTED TO API");
    } else {
      alert("fill the form!");
    }
  };

  checkValid = () => {
    if (
      Object.values(this.state.isValid).filter(value => !value).length === 0
    ) {
      this.setState({ ...this.state, submit: true });
    }
  };

  handleChange = (e, item) => {
    if (e.target.value.length >= 5) {
      this.setState(
        {
          ...this.state,
          isValid: { ...this.state.isValid, [`${item}`]: true }
        },
        this.checkValid
      );
    }
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        submit is: {this.state.submit ? "true" : "false"}
        <br />
        {[1, 2, 3, 4, 5].map(item => {
          return (
            <input
              name={"field" + item}
              type="text"
              onChange={e => {
                this.handleChange(e, item);
              }}
            />
          );
        })}
        <input type="submit" value="ok" />
      </form>
    );
  }
}

export default App;

Answer 2

You can move validation from the handleChange function. Change your function like this (you need to set name prop for your inputs):

handleChange = (e) => {
  const filed = e.target.name;
  let newState = this.state;
  newState[field] = e.target.value;
  this.setState(newState);
}

and in the onSubmit function check if all values are valid and only then call your API.

  submit = (e) => {
    e.preventDefault();
    if(this.validate()){ . //validate function should be defined in your component - there you will have access to the component's state
      //call api
    } else {
     //show errors
    }
  }

Answer 3

Maybe you can try to validate like this you can create validate function then you can implement validate function in your submit function.

 constructor(props, context) {
    super(props, context);

    this.state = {
      email: "",
      user: "",
      submitted: false,
      errors: [],
      errorEmail: false,
      errorUserLenght: false,
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.validate = this.validate.bind(this);
  }

 validate(email, user) {
    const errors = [];

    if (email.length < 5) {
      this.setState({ errorEmail: true });
    } else {
      this.setState({ errorEmail: false });
    }
    if (email.split("").filter(x => x === "@").length !== 1) {
      this.setState({ errorEmail: true });
    } else {
      this.setState({ errorEmail: false });
    }

    if (email.indexOf(".") === -1) {
      this.setState({ errorEmail: true });
    } else {
      this.setState({ errorEmail: false });
    }

    if (user.length < 6) {
      this.setState({ errorUserLenght: true });
    } else {
      this.setState({ errorUserLenght: false });
    }


    return errors;
  }

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

  async handleSubmit(event) {
    event.preventDefault();

   await this.validate(email, password);

  // Here will be your code for POST
 }