javascript - How to add validation in Material ui form input fields - Stack Overflow

admin管理员组

文章数量:1410712

I have a react functional ponent 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 ponent 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 ponent 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.

I have a react functional ponent 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 ponent 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 ponent 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.

• javascript
• reactjs
• forms
• validation
• material-ui

Share Follow edited Oct 15, 2019 at 18:06 Lara asked Oct 15, 2019 at 17:59 LaraLara 3,03199 gold badges4444 silver badges8282 bronze badges 3

• What is your submit function? That is where I would put client side validation, but I don't see one. – 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 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 Commented Oct 15, 2019 at 18:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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 ponent

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 prehensive, 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 pletely if a simple required check is all you need.

本文标签： javascriptHow to add validation in Material ui form input fieldsStack Overflow