CODEWITHSUNDEEP
javascriptvalidationmaterial-uitextfield
Mo3z
Mo3z

Reputation: 2128

How to invalidate a TextField in Material UI

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.

Upvotes: 30

Views: 128607

Answers (4)

Mo3z
Mo3z

Reputation: 2128

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)}
          />
        )
      }
    }

Upvotes: 45

Ivan Bitkin
Ivan Bitkin

Reputation: 61

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"
                    />
                     );
  }

Upvotes: 6

Sam
Sam

Reputation: 661

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)}/>

Upvotes: 47

Larry Maccherone
Larry Maccherone

Reputation: 9523

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

Upvotes: 5

Related Questions