Validation of form input fields in React

pattern="[A-Za-z]{3}" is a feature from HTML5.

Complete solution here: https://codepen.io/tkrotoff/pen/qypXWZ?editors=0010

If you only want to use default HTML5 validation:

class FormValidate extends React.Component {
  state = {
    username: ''
  };

  handleUsernameChange = e => {
    console.log('handleUsernameChange()');
    this.setState({
      username: e.target.value
    });
  }

  handleSubmit = e => {
    console.log('handleSubmit() Submit form with state:', this.state);
    e.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group">
          <label htmlFor="username">Name</label>
          <input
            id="username"
            name="username"
            value={this.state.username}
            onChange={this.handleUsernameChange}
            placeholder="Name"
            pattern="[A-Za-z]{3}"
            className="form-control" />
        </div>

        <button className="btn btn-primary">Submit</button>
      </form>
    );
  }
}

If you want to better integrate with Bootstrap 4:

class FormNoValidate extends React.Component {
  state = {
    username: '',
    error: ''
  };

  handleUsernameChange = e => {
    console.log('handleUsernameChange()');
    const target = e.target;
    this.setState({
      username: target.value,
      error: target.validationMessage
    });
  }

  handleSubmit = e => {
    console.log('handleSubmit() Submit form with state:', this.state);
    e.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} noValidate>
        <div className="form-group">
          <label htmlFor="username">Name</label>
          <input
            id="username"
            name="username"
            value={this.state.username}
            onChange={this.handleUsernameChange}
            placeholder="Name"
            pattern="[A-Za-z]{3}"
            className="form-control" />
          <div className="invalid-feedback d-block">
            {this.state.error}
          </div>
        </div>

        <button className="btn btn-primary">Submit</button>
      </form>
    );
  }
}

If you want to go further (more features, more control, better integration):

I've written a very simple React library to deal with form validation and that supports HTML5 attributes: https://github.com/tkrotoff/react-form-with-constraints

Examples here: https://github.com/tkrotoff/react-form-with-constraints/blob/master/README.md#examples

with React hook, we can build custom hook to make validation much easier. with your example blow. you can easily by adding register method from react hook form: https://github.com/bluebill1049/react-hook-form

import React from 'react';
import useForm from 'react-hook-form';

function Test() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return {
    <form className="form-group" onSubmit={handleSubmit(onSubmit)}>
      <label className="col-sm-0 control-label"> Name : &nbsp; </label>
        <input
          type="text"
          ref={register}
          placeholder="Name"
          pattern="[A-Za-z]{3}"
          className="form-control"
        /> 
     </div>
  }
}