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](https://codesandbox.io/s/new)? — Triyugi Narayan Mani, Dec 05 '18 at 09:28
@TriyugiNarayanMani. Actually I am working on Wizard Form . {current < this.steps.length - 1 && ( )} — Jon, Dec 05 '18 at 09:31
Thank You please help me it really urgent . We have some deadline that's why — Jon, Dec 05 '18 at 09:35

Triyugi Narayan Mani · Accepted Answer · 2018-12-05T12:56:13.740

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 05 '18 at 12:56

answered Dec 05 '18 at 10:22

Triyugi Narayan Mani

3,039
8
36
56

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 – Nikos M. Dec 05 '18 at 10:39
@NikosM. yes Validation is already implemented but when user delete image it going to next – Jon Dec 05 '18 at 10:59
@NikosM. Could you please help me – Jon Dec 05 '18 at 10:59
@NikosM. Updated the answer. – Triyugi Narayan Mani Dec 05 '18 at 12:56
@TriyugiNarayanMani Thank You it working , please also have a look to this question ( https://stackoverflow.com/questions/53631198/how-to-preview-a-video-in-reactjs ) – Jon Dec 05 '18 at 16:29
@Jon I don't think ant-design supports that feature. – Triyugi Narayan Mani Dec 06 '18 at 06:11
@TriyugiNarayanMani please have a look to this question . Urgent need https://stackoverflow.com/questions/53645205/how-to-change-step-number-with-loading-icon-in-reactjsplease – Jon Dec 06 '18 at 06:17

How to validating form in reactjs

1 Answers1