fix(widget): validate required checkboxes as accepted (#15135)

Required checkbox fields in the pre-chat form now remain invalid unless
they are checked. Other required field types keep their existing
validation behavior, and the existing localized required message is
reused.

## Closes

Closes https://github.com/chatwoot/chatwoot/issues/15128

## How to reproduce

1. Add a required checkbox custom attribute to the pre-chat form.
2. Check and then uncheck it.
3. Submit the form; submission is now blocked until the checkbox is
checked.

## What changed

- Use the FormKit accepted rule for required checkbox fields.
- Map accepted validation failures to the existing pre-chat required
message.

---------

Co-authored-by: Nazmus Samir <nazmussamir@Nazmuss-MacBook-Pro.local>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
This commit is contained in:
Nameless-Monster-Nerd
2026-07-30 22:50:09 -04:00
committed by GitHub
parent ecb7a44f07
commit b7a0ec62ba
2 changed files with 42 additions and 1 deletions

View File

@@ -187,7 +187,8 @@ export default {
};
const validationKeys = Object.keys(validations);
const isRequired = this.isContactFieldRequired(name);
const baseRules = isRequired ? [['required']] : [['optional']];
const requiredRule = type === 'checkbox' ? 'accepted' : 'required';
const baseRules = isRequired ? [[requiredRule]] : [['optional']];
if (
!validationKeys.includes(name) &&
@@ -293,6 +294,7 @@ export default {
isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
required: $t('PRE_CHAT_FORM.REQUIRED'),
accepted: $t('PRE_CHAT_FORM.REQUIRED'),
matches: item.regex_cue
? item.regex_cue
: $t('PRE_CHAT_FORM.REGEX_ERROR'),

View File

@@ -0,0 +1,39 @@
import { describe, expect, it } from 'vitest';
import Form from '../Form.vue';
const getValidation = Form.methods.getValidation;
const validationFor = (field, required) =>
getValidation.call(
{
isContactFieldRequired: () => required,
},
field
);
describe('PreChat Form getValidation', () => {
it('returns accepted for a required checkbox', () => {
expect(validationFor({ type: 'checkbox', name: 'checkbox' }, true)).toEqual(
[['accepted']]
);
});
it('returns optional for an optional checkbox', () => {
expect(
validationFor({ type: 'checkbox', name: 'checkbox' }, false)
).toEqual([['optional']]);
});
it('returns required for a required text field', () => {
expect(validationFor({ type: 'text', name: 'text' }, true)).toEqual([
['required'],
]);
});
it('combines required and type-specific validation rules', () => {
expect(
validationFor({ type: 'email', name: 'emailAddress' }, true)
).toEqual([['required'], ['email']]);
});
});