CODEWITHSUNDEEP
reactjsmaterial-ui
bvenkatr
bvenkatr

Reputation: 85

React client side validation with material-ui component

Some material-ui components have errorText as a prop which we can use to show errors, But, doing that in react become lot complex if my form has large number of field components.

Please suggest the best way to handle client-side validation with material-ui comonents.

Upvotes: 2

Views: 5665

Answers (3)

Cesar Ho
Cesar Ho

Reputation: 183

If you are using Redux in React project, redux-form give you a simple way to implement form validation.

Check this out: http://redux-form.com/6.4.3/examples/syncValidation/

Upvotes: 1

szymonm
szymonm

Reputation: 1051

I would suggest using some HoC (Higher-order Component) approach. I tested many solutions for form validation in React JS, the one that I always choose is: react-validation-mixin. Take a look at this example.

Example of the standard input:

<input
  type='text'
  placeholder='Username'
  value={this.props.username}
  onChange={this.onChange('username')}
  onBlur={this.props.handleValidation('username')}
/>

In this example value of that input comes from props (example with Flux implementation) and that's probably what you aim for too (lots of inputs). onChange will need to handle value change so that this.props.username gets updated too and onBlur will trigger validation check (so that the error will show up once user leaves the input).

In order to get the error message, use: this.props.getValidationMessages('username')

It's a universal solution and you can use it in different libs. But taking TextField from material-ui, as you asked:

<TextField
  floatingLabelText="Username"
  value={this.props.username}
  errorText={this.props.getValidationMessages('username')}
  onChange={this.onChange('username')}
  onBlur={this.props.handleValidation('username')}
  ...
/>

Remember to use HoC with your component: export default validation(strategy)(UserLogin) That way, you will get all the necessary helper methods in props.

Upvotes: 1

Preety Singh
Preety Singh

Reputation: 221

I think your issue is that you have to manage a lot with state/store. In react validation is complex because of one-way binding.

This library https://github.com/vishalvisd/react-validator is one which I found that supports material-ui component validation. Though in general you may use this to validate any component.

Upvotes: 2

Related Questions