می توانیم اینکار را در هنگام وارد کردن ورودی ها و هم در هنگام سابمیت دیتاها انجام دهیم.

در کد زیر در هنگام وارد کردن ورودی کنترل می کنیم که مقدار وارد شده عدد باشد.

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    if (nam === "age") {
      if (!Number(val)) {
        alert("Your age must be a number");
      }
    }
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username} {this.state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

اگر  بخواهیم بعد از سابمیت ولیدیشن انجام شود باید در onSubmit اینکار در انجام دهیم.