How to invalidate a TextField in Material UI

Question

I am using TextField component to capture phone number. As the user is typing, I want to invalidate the entry if it is not a number or if it does not follow a format and display the errorText. Currently errorText is displayed even without touching the field. How can I achieve this behavior?

Any help is greatly appreciated.

score 47 · Answer 1 · answered Jul 12 '18 at 21:31

47

As of 0.20.1 you can helperText and error props

<TextField 
    hintText="Phone"
    error ={this.state.errorText.length === 0 ? false : true }
    floatingLabelText="Phone"
    name="phone"
    helperText={this.state.errorText}
    onChange={this.onChange.bind(this)}/>

answered Jul 12 '18 at 21:31

Sam

651
5
5

4

Thanks! This works for me but I changed it a bit, used `error={!!this.state.errorText}` – Daniel Jonce Evans Oct 23 '18 at 01:53

score 45 · Accepted Answer · edited Oct 18 '22 at 12:03

Extending Larry answer, set errorText to a property in state (errorText in below example). When the value in TextField changes, validate the entry and set the value of the property (errorText) to display and hide the error.

class PhoneField extends Component
  constructor(props) {
    super(props)
    this.state = { errorText: '', value: props.value }
  }
  onChange(event) {
    if (event.target.value.match(phoneRegex)) {
      this.setState({ errorText: '' })
    } else {
      this.setState({ errorText: 'Invalid format: ###-###-####' })
    }
  }
  render() {
    return (
      <TextField hintText="Phone"
        floatingLabelText="Phone"
        name="phone"
        errorText= {this.state.errorText}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

Updated based on comment below that errorText is replaced by helperText

class PhoneField extends Component
      constructor(props) {
        super(props)
        this.state = { errorText: '', value: props.value }
      }
      onChange(event) {
        if (event.target.value.match(phoneRegex)) {
          this.setState({ errorText: '' })
        } else {
          this.setState({ errorText: 'Invalid format: ###-###-####' })
        }
      }
      render() {
        return (
          <TextField hintText="Phone"
            floatingLabelText="Phone"
            name="phone"
            helperText= {this.state.errorText}
            onChange={this.onChange.bind(this)}
          />
        )
      }
    }

This doesn't work anymore. `errorText` got replaced by `helperText` and the bool `error` to show it as error text. — Spenhouet, Aug 22 '18 at 09:05
Set error to the TextField doesn't invalidate the input inside TextField, doesn't prevent the form submit as well. It is just an UI behaviour with no real function. — Up209d, Nov 30 '18 at 01:36

score 6 · Answer 3 · answered May 09 '19 at 11:50

Material-UI v3.9.3 working version:

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { helperText: '', error: false };
  }

  onChange(event) {
    if (event.target.value.length > 2) {
      this.setState({ helperText: '', error: false });
    } else {
      this.setState({ helperText: 'Invalid format', error: true });
    }
  }

  render() {
    return (

                   <TextField
                      helperText={this.state.helperText}
                      onChange={this.onChange.bind(this)}
                      error={this.state.error}
                      required
                      id="outlined-required"
                      label="First Name"
                    />
                     );
  }

score 5 · Answer 4 · answered Mar 09 '16 at 20:28

5

if errorText is an empty string "", then it will not be displayed. So, set it to that in getInitialState().

answered Mar 09 '16 at 20:28

Larry Maccherone

9,393
3
27
43

How to invalidate a TextField in Material UI

4 Answers4