How to add Email exist validation to react js based on Api resonse

Question

item at form to show up form fields here is my code

import { Form, Input, Button, Select, } from 'antd';
import axios from "axios";

render() {
    const isLoading = this.state.isLoading;
    return (
        <>
            <Form className={'auth-form'} onSubmit={(e) => { this.onSubmit(e) }}>
                <h3 className={'mb-5 text-center'}>Candidate Sign Up</h3>

                <Form.Item
                    label=""
                    name="email"
                    rules={[{ required: true, type: 'email', message: 'Please enter email address'}]}
                >
                    <Input className={'ks-form-control'} placeholder={'Enter Email'} onChange={this.onChangehandler} />
                </Form.Item>
                <Form.Item
                    label=""
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password className={'ks-form-control'} placeholder={'Password'} />
                </Form.Item>
                <Form.Item
                    label=""
                    name="confirmPassword"
                    rules={[{ required: true, message: 'Please confirm your password!' }]}
                >
                    <Input.Password className={'ks-form-control'} placeholder={'Confirm Password'} />
                </Form.Item>
                
                <Form.Item >
                    <Button className={'btn-custom px-4 py-2 d-block w-100'} type="primary" htmlType="submit">
                        Create an account
                    </Button>
                </Form.Item>
                
            </Form>
        </>
    )
}

Here is the code for submithandler. I want to show message comming from api and custom message with below code at rules={[{}]}

msg: response.data.message

On submit handler

onSubmitHandler = (e) => {
  e.preventDefault();
    this.setState({ isLoading: true });
    axios
        .post("http://127.0.0.1:8000/api/user-signup", this.state.signupData)
        .then((response) => {
            this.setState({ isLoading: false });
            if (response.data.status === 200) {
                this.setState({
                    msg: response.data.message // message comming from api
                   
                });
               
            }

            if (response.data.status === "failed") {
                this.setState({ msg: response.data.message }); // message comming from api
                  
            }
        });
}

The valiations for all fields working fine with rules={[]} . But I want show error based on api response like if a email already registered then this will show message 'email already exists' Please let me know how can i do this

Chrissi Grilus · Accepted Answer · 2020-10-04 13:57:15Z

0

It would be helpful to know what Form.Item even is, which UI library you are using here. If you can set rules on the component you can probably also set an "error"-attribute. My best guess to what you have provided would be:

const [emailError, setEmailError] = useState(false)

const =  onSubmit = (formvalues) => {
  const { email } = formvalues
  validateEmailViaAPI(email).then((response) => response.isValid ? doWhatEver(formvalues) : setEmailError(true))
}

const onChangeEmail = () => setEmailError(false)

Inside your Input Component you can specifically set the error:

<Form.Input error={emailError}>  </Form.Input>

This should then show the error message if you set the error yourself. This probably happened behind the "rules"-attribute that the component used.

Dont forget to clear the error at a useful point. It would make sense to put that validation inside a custom hook if you use it more than once.

If this wasnt helpful please provide more input about the Input-Component that you are using.

answered Oct 4, 2020 at 13:57

Chrissi Grilus

1,4453 gold badges15 silver badges23 bronze badges

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

1 Comment

Chrissi Grilus Over a year ago

Well my answer is still valid. 1.: In onSubmit: check if the email is valid in the then-block 2.: If not valid set the error (however your form library does it. I still dont know what you are using.) What should response.data.status === 'failed' be? I dont think thats correct, check again and add a catch-block in the API-response. Then do something like useState -> setError. 3. resolve the error state once the user starts typing again in the email field.

Deepak Gupta · Accepted Answer · 2020-10-05 05:30:10Z

0

You have not provided the onSubmit function but if you are using axios you can do something like

const [error, setError] = useState(null)

const onSubmit = (e) => {
e.preventDefault();
axios.post('linkToApi').then((res) => 
{
`res is the response of the succesful api call`
`do Whatever you want on successful api call`
}).catch((err) => {
setError(err.response.data.message)
})
}

Here err.response.data is the response of your api on error.

You have to set your backend to return http status codes which will determine the success or failure of the api call. For eg:- 200 means successful api call and 401 means unauthorized. See this answer to do this in express https://stackoverflow.com/a/28547843/12200445

In your form you can create a div to show the error

{error && <div>{error}</div>} //This div will only show when there is some value defined for `error`

EDIT: I didn't realize you were using class components but I hope you get the idea.

edited Oct 5, 2020 at 5:30

answered Oct 4, 2020 at 14:51

Deepak Gupta

6582 gold badges7 silver badges17 bronze badges

8 Comments

mdkamrul Over a year ago

Yes, I am using axios. I have added onSubmit function and updated my question

Deepak Gupta Over a year ago

I looks like you have somewhat configured the api to return http codes. You can use the axios catch block as in the answer to set custom error message based on api response if the status code is not between 200 and 299

mdkamrul Over a year ago

yes i can but i wanted this at form.item rules[{required: true, message: custom or message came from api response}]

Deepak Gupta Over a year ago

Another suggestion for you to set up a proxy in your package.json file to avoid writing the whole url in the axios function which will development and deployment easier. See this- dev.to/loujaybee/using-create-react-app-with-express

Deepak Gupta Over a year ago

Where does form.item come from ??

|

Collectives™ on Stack Overflow

How to add Email exist validation to react js based on Api resonse

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related