如何在 Material ui 表单输入字段中添加验证

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.

Answer 1

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.