Validate textfield based on input React Material Ui

Question

Helo ! I am looking for a way to set error whenever the value inserted in the first text field is different than "28.71",else set correct

My code so far :

class Main extends React.PureComponent {
    render() {
        return (
            <Box sx={SX.root}>
                <Box className="textFieldWrapper">
                    <TextField
                        sx={SX.textField}
                        id="filled-number"
                        type="number"
                        label={this.props.settings.texts.t1}
                        variant="outlined"
                        size="small"
                        style={{width: '100px'}}
                    />
                </Box>
                <Box className="textFieldWrapper2">
                    <TextField
                        sx={SX.textField2}
                        id="filled-number"
                        type="number"
                        label={this.props.settings.texts.t2}
                        variant="outlined"
                        size="small"
                        style={{width: '100px'}}
                    />
                </Box>
            </Box>
        );
    }
}
// -----------------------------------------------------------------------------------------------------------------
//  I N T E R N A L
// -----------------------------------------------------------------------------------------------------------------

// =====================================================================================================================
//  E X P O R T
// =====================================================================================================================
export default Main;

Asad Ashraf · Accepted Answer · 2022-03-14 13:30:49Z

1

Using a react component state, one can store the TextField value and use that as an indicator for an error. Material-UI exposes the error and helperText props to display an error interactively.

Take a look at the following example:

<TextField
  value={this.state.text}
  onChange={event => this.setState({ text: event.target.value })}
  error={text === ""}
  helperText={text === "" ? 'Empty field!' : ' '}
/>

answered Mar 14, 2022 at 13:30

Asad Ashraf

1,71511 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Catalin Tudose Over a year ago

Works fine,but it is displaying the error message even before the user inputs anything.How could i fix that?

Asad Ashraf Over a year ago

for this you can set the value of error as a useState hook and then onBlur method of TextField, set the useState hook value ( it's just an idea of how it will work ). Please vote and accept the answer so that this can be closed. thanks

Collectives™ on Stack Overflow

Validate textfield based on input React Material Ui

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related