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:
committed by
GitHub
parent
ecb7a44f07
commit
b7a0ec62ba
@@ -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'),
|
||||
|
||||
39
app/javascript/widget/components/PreChat/specs/Form.spec.js
Normal file
39
app/javascript/widget/components/PreChat/specs/Form.spec.js
Normal 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']]);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user