I am working on an Ant Design form that includes a model validation function with three checkboxes.
<a-form-model-item has-feedback label="CI/CD Stages" prop="stage">
<a-checkbox-group v-model="form.stage">
<a-checkbox value="1" name="stage"> Build Stage 1</a-checkbox>
<a-checkbox value="2" name="stage"> Build Stage 2</a-checkbox>
<a-checkbox value="3" name="stage"> Build Stage 3 </a-checkbox>
</a-checkbox-group>
</a-form-model-item>
My goal is to have validation fail if both Build Stage 2 and Build Stage 3 are selected.
data() {
...
let checkModuleStage = (rule, value, callback) => {
clearTimeout(checkPending);
checkPending = setTimeout(() => {
if (value === [2, 3] || value === [3, 2]) {
callback(
new Error(
"You have selected both Stage 2 and Stage 3. Only one can be selected:"
)
);
} else {
callback();
}
}, 1000);
}
return {
rules: {
stage: [
{
type: 'array',
required: true,
message: 'Please select at least one stage',
trigger: 'change',
},
{ validator: checkModuleStage, trigger: "change" },
],
}
}
Despite implementing the validation function, I am still able to select both stages together. When I attempt to submit the form, it shows that the check passed. Does anyone have a solution for this issue? Thank you!