How to validate material ui TextField in reactjs?

Question

I'm using material ui TextField in my react application. I need to know how to use error and helper text validation for my below code which carry email and password?. Please go through the code given below and provide me a suitable solution which i can pulloff

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import swal from 'sweetalert';

class Login extends Component {
  constructor(props){
    super(props);
    this.state={
      email: '',
      password: ''
    }
  }

  async handleClick() {
    const { email, password } = this.state;
    let options = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    }
    let response = await fetch('/login', options);
    response = await response.json();        
    if (!response) {
      swal({
        title: "Wrong Entry",
        text: "Check your email and password",
        icon: "warning",
        button: "OK",
      });
      return;
    }

    if(response === 'user'){
      await auth.userLogin();
      this.props.history.push('/app/my');
      return;

    }



    options = {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' }
    }

    let res = await fetch('/team-check', options);
    res = await res.json();
    await auth.login();
    if (!res) {
      this.props.history.push('/choose-teams')
    } else {
      this.props.history.push('/dashboard',{state: { detail: response }})
    }
  }

  render() {
    return (
      <div>
        <MuiThemeProvider>
          <div>
          <AppBar
              title="User-Login"
            />
            <TextField
              hintText="Enter your Email"
              floatingLabelText="email"
              onChange = {(event,newValue) => this.setState({email:newValue})}
              />
            <br/>
            <TextField
                type="password"
                hintText="Enter your Password"
                floatingLabelText="Password"
                onChange = {(event,newValue) => this.setState({password:newValue})}
                />
              <br/>
              <RaisedButton label="Submit" primary={true} style={style} onClick={(event) => this.handleClick(event)}/>

          </div>
          <Link to="/forgot-password">Forgot-Password</Link>
          </MuiThemeProvider>
      </div>
    );
  }
}

const style = {
  margin: 15,
};

export default Login;

I have try many answer from stack overflow, but its all are outdated now. Kindly go through my code and the help will be appreciated

Why have you defined options 2 times in the same function?

towerofhope
– towerofhope

2020-05-08 05:43:38 +00:00
Commented May 8, 2020 at 5:43 — towerofhope
– towerofhope, Commented May 8, 2020 at 5:43

Guru Hadadi · Accepted Answer · 2020-05-07 05:19:40Z

1

You can use error and helperText props and do the validation

TextField

        <TextField
          error={!!this.state.errors.email}
          hintText="Enter your Email"
          floatingLabelText="email"
          onChange={(event, newValue) => this.setState({ email: newValue })}
          helperText={this.state.errors.email && this.state.errors.email}
        />

handleSubmit:

async handleClick() {
    const { email, password } = this.state;
    if (email.length < 4) {
      this.setState({
        errors: { ...this.state.errors, email: "please enter valid email" }
      });
    }
  ...

Working demo is here

Note that you will need to add/reset errors by yourself. You can also consider to use validation libraries such as this . Also formik and yup is popular choice.

answered May 7, 2020 at 5:19

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

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

1 Comment

Guru Hadadi Over a year ago

click the submit button in the demo link , it will show the error ... you need to conditionally set/show errors based on your needs..

Collectives™ on Stack Overflow

How to validate material ui TextField in reactjs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related