mardi 2 novembre 2021

show error if none of the checkboxes are selected

I have a bunch of checkbox, and need to show a warning message if none of them are selected. checkbox screenshot

Like this, WARINING message

The only rule is that, if none of the checkbox is selected it must show the warning message like above when submitting, and no warning if anyone of them is selected.

my code:

             <Form.Item
                    name="checkboxes"
                    valuePropName="checked"
                    rules={[
                      {
                        required: true,
                        message: "Please select atleast one working day",
                      },
                    ]}
                  >
                    <Checkbox onChange={this.sun}>Sun</Checkbox>
                    <Checkbox onChange={this.mon}>Mon</Checkbox>
                    <Checkbox onChange={this.tue}>Tue</Checkbox>
                    <Checkbox onChange={this.wed}>Wed</Checkbox>
                    <Checkbox onChange={this.thu}>Thu</Checkbox>
                    <Checkbox onChange={this.fri}>Fri</Checkbox>
                    <Checkbox onChange={this.sat}>Sat</Checkbox>
            </Form.Item>

In the above code, it shows the warning even if one of any checkbox is clicked.

So, I tired changing the rules to,

            rules={[
              {
                required:
                  this.state.mon &&
                  this.state.tue &&
                  this.state.wed &&
                  this.state.thu &&
                  this.state.fri &&
                  this.state.sat &&
                  this.state.sun === false,
                message: "Please select atleast one working day",
              },

but in above case, it not even showing any warning message if none of the checkbox is selected.

I use antd for UI, and checkbox is import from it. (for ref: https://ant.design/components/checkbox/ )




Aucun commentaire:

Enregistrer un commentaire