Validate Material UI TextField Submit

Question

I'm trying to validate my email and password TextField(s) for a user logging in. I'm able to catch errors via my handleSubmit function, but unsure of how to implement those errors into the MaterialUI error and helperText fields.

Note, I'm using both material-ui and react-bootstrap, that's why they're mixed.

Login.js - where the email and password TextField(s) are

import React, { Component } from 'react';

import firebase from '../firebase';

import { FiLogIn } from 'react-icons/fi';

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField'

import Form from 'react-bootstrap/Form';
import Col from 'react-bootstrap/Col';

export class Login extends Component {
    state = {
        email : "",
        password : ""
    };
    handleChange = (e) => {
        const { id, value } = e.target
        this.setState(prevState => ({
            ...prevState,
            [id] : value
        }))
    };
    handleSubmit = (e) => {
        e.preventDefault();

        const { email, password } = this.state;
        firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((user) => {
            // User is signed in
        })
        .catch((error) => {
            // Error
        });
    };
    render() {
        const { email, password } = this.state;
        return (
            <>
                <Form className="sign-in-form">
                    <Form.Row className="align-items-center">
                        <Col xs="auto">
                            <Form.Group controlId="email">
                                <Form.Label srOnly>Email Address</Form.Label>
                                <TextField
                                    id="email"
                                    label="Email"
                                    type="email"
                                    variant="outlined"
                                    aria-describedby="emailHelp"
                                    placeholder="Enter email"
                                    value={email}
                                    onChange={this.handleChange}
                                    
                                />
                            </Form.Group>
                        </Col>
                        <Col xs="auto">
                            <Form.Group controlId="password">
                                <Form.Label srOnly>Password</Form.Label>
                                <TextField
                                    id="password"
                                    label="Password"
                                    variant="outlined" 
                                    type="password"
                                    placeholder="Enter password"
                                    value={password}
                                    onChange={this.handleChange}
                                />
                            </Form.Group>
                        </Col>
                    </Form.Row>
                </Form>
                <Button variant="contained" color="primary" className="login" type="submit" onClick={this.handleSubmit}><FiLogIn className="loginIcon" /> Login</Button>
            </>
        )
    }
}

handleSubmit Function - where firebase validation errors are caught

    handleSubmit = (e) => {
        e.preventDefault();

        const { email, password } = this.state;
        firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((user) => {
            // User is signed in
        })
        .catch((error) => {
            // Error
        });
    };

Let me know of what I can do here, I'm relatively new with React and always looking to learn new things.

Eldshe · Accepted Answer · 2021-01-03 11:14:15Z

2

Try this approach:

add an error state to your component:

state =  {
        email : "",
        password : "",
        error : false,
        errMsg : "" 
    };

then change it when error is thrown from the firebase auth action inside handleSubmit:

.catch((error) => {
            this.state = {error : true, errMsg: error.msg};
        });

last, add a conditional TextField to show the error message:

{error &&    <TextField
              error
              id="yourErrorId"
              helperText=this.state.errMsg
              variant="outlined"
            />}

edited Jan 3, 2021 at 11:14

answered Jan 3, 2021 at 10:58

Eldshe

7436 silver badges20 bronze badges

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

2 Comments

Marc Gault Over a year ago

This works after changing a few things. Sadly, the conditional TextField displays an additional text field, instead of having separate errors for the email and password fields on the current TextField's

Eldshe Over a year ago

Try creating a global error message component for your project. That's the best practice. I think MaterialUI already has one better than error TextField, so you should better do a little research. Best regards!

b3hr4d · Accepted Answer · 2021-01-03 10:56:17Z

1

Make an state for error:

state = {
    email : "",
    password : "",
    error:"",
};

Change it on catching error:

    .catch((error) => {
        this.setState({error: error.response.data}) // change it to your error response 
    });

And your input should be something like this:

<FormControl error={error}>
    <InputLabel htmlFor="email">Email</InputLabel>
    <Input
      id="email"
      value={email}
      onChange={this.handleChange}
      aria-describedby="email"
    />
   <FormHelperText id="email"> {error ? error : "Enter your email address"}</FormHelperText>
</FormControl>

Remember to clear error state with handleChange.

answered Jan 3, 2021 at 10:56

b3hr4d

4,6381 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

Validate Material UI TextField Submit

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related