How to add validation in Material ui form input fields

Question

I have a react functional component built using Material ui form which contains TextField and onChange event is handled in "Container Component". Below is the form code where i need to add required as client side form validation but, its not working. Do i need to add some logic in container component as well?

<form className={classes.container}>
<Grid container item xs={12} alignItems="center">
<TextField
  id="outlined-bare"
  className={classes.textField1}
  defaultValue=""
  required
  margin="normal"
  variant="outlined"
  autoComplete="on"
  InputProps={{ style: { height: 40 } }}
  onChange={(e) => handleChange(e, 'Name')}
/>

and here is event handler in container component like below

 setInput = (e, source) => {
    e.preventDefault();
    switch  (source) {
        case "Name":
            this.setState({
                ...this.state,
                Name: e.target.value
            })
            break;
    default:
            this.setState({...this.state})
            break;
    }
}

 return (
        <div>
            <Drawer
                route={routes.abc}
                history={this.props.history}
                handleChange={this.setInput}
            />
        </div>
    )

What's wrong, and is missing? I am new to ReactJs. Kindly suggest.

What is your submit function? That is where I would put client side validation, but I don't see one. — Brian Thompson
– Brian Thompson, Commented Oct 15, 2019 at 18:30
@BrianThompson I have a Submit function which will read the value entered in TextField and call redux action. I need validation to be handled before it..Thanks — Lara
– Lara, Commented Oct 15, 2019 at 18:34
@BrianThompson Do you think, its possible or shall i put condition to check TextField value inside submit function? In this case, where is required working? — Lara
– Lara, Commented Oct 15, 2019 at 18:50

Brian Thompson · Accepted Answer · 2019-10-15 19:36:26Z

With what information is available, I would suggest doing something like the following simplified version:

Container

class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      other_value: '',
    }
  }

  handleChange = (field, value) => {
    this.setState({ [field]: value });
  }

  valid = () => {
    if (!this.state.name) {
      return false;
    }
  }

  submit = () => {
    if (this.valid()) {
      // call your redux submit
    }
  }

  render() {
    return (
      <MyForm
        values={this.state}
        handleChange={this.handleChange}
        submit={this.submit}
      />
    );
  }
}

Form component

const MyForm = (props) => {
  return (
    <form onSubmit={props.submit}>
      <TextField
        onChange={(e) => props.handleChange('name', e.target.value)}
        value={props.values.name}
        required
      />
      <TextField
        onChange={(e) => props.handleChange('other_value', e.target.value)}
        value={props.values.other_value}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

First, if you are using an onChange on your input, you should also provide its value to insure they remain in-sync.

Second, If you want the required prop to have an effect, you should make sure your submit function is called by the form. The required prop is just passed down to the input element which will get used by the wrapping form (explanation of required). So if the form isn't the one calling your submit function, required will be ignored.

Lastly, I only provided a simple validate function, if you want it to be more comprehensive, just add more checks and return specific errors or an array of errors instead of a simple true or false. You could also skip the validation function completely if a simple required check is all you need.

Collectives™ on Stack Overflow

How to add validation in Material ui form input fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related