CODEWITHSUNDEEP
twitter-bootstrapvalidationreactjs
developer_beginning
developer_beginning

Reputation: 393

Validation of form input fields in React

<div className="form-group">
  <label className="col-sm-0 control-label"> Name : &nbsp; </label>
  <input
    type="text"
    value={this.state.UserName}
    onChange={this.handleChangeUserName}
    placeholder="Name"
    pattern="[A-Za-z]{3}"
    className="form-control"
  />
</div>

Hi, I am trying to validate a form input field in React using pattern validation. But it's not working. I am using validation as simple as pattern="[A-Za-z]{3}".

Kindly let me know how to work this out. Putting validation in React Bootstrap component.

Upvotes: 10

Views: 80928

Answers (3)

Bill
Bill

Reputation: 19248

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>
  }
}

Upvotes: 3

tanguy_k
tanguy_k

Reputation: 12293

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>
    );
  }
}

Invalid input FormValidate

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>
    );
  }
}

Invalid input FormNoValidate

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

Upvotes: 10

Mayank Shukla
Mayank Shukla

Reputation: 104379

You are using the value property (means controlled component) of input element and updating the state in onChange method, So you can easily test this regex in onChange and update the state only when the input will be valid.

Like this:

handleChangeUserName(e){
   if(e.target.value.match("^[a-zA-Z ]*$") != null){
       this.setState({UserName: e.target.value});
   }
}

Check the working code:

class HelloWidget extends React.Component {
  
  constructor(){
    super();
    this.state={UserName:''}
    this.handleChangeUserName = this.handleChangeUserName.bind(this);
  }
  
  handleChangeUserName(e){
    if(e.target.value.match("^[a-zA-Z ]*$")!=null) {
      this.setState({UserName: e.target.value});
    }
  }

  render(){
    return(
      <div className="form-group">
        <label className="col-sm-0 control-label" htmlFor="textinput"> Name : &nbsp; </label>
        <input type="text" value={this.state.UserName} onChange={this.handleChangeUserName}  placeholder="Name" className="form-control"></input>
      </div>
    )
  }
}
  
ReactDOM.render(<HelloWidget/>, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container' />

Check the jsfiddle for working example: https://jsfiddle.net/uL4fj4qL/11/

Check this jsfiddle, Material-Ui snackbar added to show the error, if user tries to enter the wrong value: https://jsfiddle.net/4zqwq1fj/

Upvotes: 10

Related Questions