How to validating form in reactjs

Question

I am working on project in reactjs, I implemented some validation in form. I implemented a logic if someone click on next without uploading photo and video then display error to user , validation is working fine in first attempt it working but when user delete a photo or video then click on next the form is not validating . Could you please help me how to validate form I am using ant-design form I will share code with you please help me i am really stuck

Please View Image of Form

Code

 <Form onSubmit={this.handleSubmit}>
      <FormItem>
        {getFieldDecorator('picture', {
          rules: [
            {
              required: true,
              message: 'Please upload picture!',
            },
          ],
        })(
          <Dragger {...props}>
            <p className="ant-upload-drag-icon">
              <Icon type="upload" />
            </p>
            <p className="ant-upload-text">
              Click or drag photo to this area to upload
            </p>
          </Dragger>,
        )}
      </FormItem>

      <PhotoText>Select a Video to Upload</PhotoText>
      <FormItem>
        {getFieldDecorator('video', {
          rules: [
            {
              required: true,
              message: 'Please upload video!',
            },
          ],
        })(
          <Dragger>
          <p className="ant-upload-drag-icon">
            <Icon type="upload" />
          </p>
          <p className="ant-upload-text">
            Click or drag Video to this area to upload
          </p>
        </Dragger>,
        )}
      </FormItem>
    </Form>

Can you please add your submit function too or create a sandbox? — Triyugi Narayan Mani
– Triyugi Narayan Mani, Commented Dec 5, 2018 at 9:28
@TriyugiNarayanMani. Actually I am working on Wizard Form . {current < this.steps.length - 1 && ( <Button type="primary" htmlType="submit" style={{ background: '#ff9700', fontWeight: 'bold', border: 'none', float: 'right', }} > Next <Icon type="right" /> </Button> )} — Jon
– Jon, Commented Dec 5, 2018 at 9:31
Thank You please help me it really urgent . We have some deadline that's why — Jon
– Jon, Commented Dec 5, 2018 at 9:35

Triyugi Narayan Mani · Accepted Answer · 2018-12-05 12:56:13Z

1

Since, you are using wizard form so you need to pass this.props.form in each steps as given below:

<Step1 form={this.props.form} />

And then in next(), you can use validateFieldsAndScroll to check for the validation as given below:

next() {
    if (this.state.current == 0) {
        this.props.form.validateFieldsAndScroll(["picture"], (err, values) => {
            if (!err) {
                const current = this.state.current + 1;
                this.setState({ current });
            }
        });
    }
}

I have created a working demo.

Edit

Then, you need to write your own logic in some way because I don't think Ant-design provides such functionality. For example, instead of if (!err) you can write as follows:

if (!err && values.picture && values.picture.fileList.length > 0)

And then you can write some logic to display custom validation message as:

{picture && picture.fileList.length <= 0 ? "Please upload picture!" : ""}

Please check the updated demo.

edited Dec 5, 2018 at 12:56

answered Dec 5, 2018 at 10:22

Triyugi Narayan Mani

3,1098 gold badges38 silver badges57 bronze badges

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

7 Comments

Nikos M. Over a year ago

it doesnt work, if user uploads and then deletes the picture the form indeed goes to next step isntead of displaying error message and staying in current step

Jon Over a year ago

@NikosM. yes Validation is already implemented but when user delete image it going to next

Jon Over a year ago

@NikosM. Could you please help me

Triyugi Narayan Mani Over a year ago

@NikosM. Updated the answer.

Jon Over a year ago

@TriyugiNarayanMani Thank You it working , please also have a look to this question ( stackoverflow.com/questions/53631198/… )

|

Collectives™ on Stack Overflow

How to validating form in reactjs

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related