CODEWITHSUNDEEP
reactjscheckboxantd
Sai Krishnadas
Sai Krishnadas

Reputation: 3419

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/ )

Upvotes: 0

Views: 501

Answers (1)

Yozi
Yozi

Reputation: 12755

This conditional, are you sure in it? false applied to sun only.

this.state.mon &&
this.state.tue &&
this.state.wed &&
this.state.thu &&
this.state.fri &&
this.state.sat &&
this.state.sun === false

Your code: "if 6 days are selected and Sunday is false - then show error message"

I guess you need something like


 {
   required: ![this.state.mon, this.state.tue, this.state.wed, this.state.thu, this.state.fri, this.state.sat, this.state.sun].some(d => !!d)
 }

Upvotes: 1

Related Questions