how to make input field border red color while sending empty value using reactjs?

Question

I'm new to react, my objective is to show border in red color when we click on send button without entering any value in input text field. I don't know how to get border red in material-ui. Do i need to validate the input field? If yes then do i need to validate with letters and alphanumeric regex? I'm bit confused in here.

Here is the code:

 <TextField
            margin="dense"
            fullWidth
            variant="outlined"
            placeholder="Enter a Message"
            name="msg"
            id="text"
          />
          <Button onClick={this.handleSubmit}>Send</Button>

Can anyone assist me in this query?

Muhammad Lahin · Accepted Answer · 2020-05-09 10:35:23Z

3

Add a value property in TextField and after submitting check value property is empty or not if empty then add a dynamic class in TextField.

state = { msg: "" }

Add an onChange and classname inside TextField attribute.

onChange = e => this.setState({ msg: e.target.value })
classname={this.state.msg !== "" ? "borderRed":""}

edited May 9, 2020 at 10:35

answered May 9, 2020 at 9:57

Muhammad Lahin

1751 gold badge3 silver badges12 bronze badges

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

2 Comments

Sandhya Over a year ago

hi, after adding value property i couldn't enter any value

Muhammad Lahin Over a year ago

Let me know if it helps or not.

Collectives™ on Stack Overflow

how to make input field border red color while sending empty value using reactjs?

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