I have a bunch of checkbox, and need to show a warning message if none of them are selected.
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