Skip to content

Add support for required html attribute #1332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Xon merged 15 commits into from
Aug 16, 2025
Merged

Add support for required html attribute #1332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a25a095
Add an `invalidState`
zoglo Aug 15, 2025
c53529f
Add examples and documentation
zoglo Aug 15, 2025
493795e
Add `$choices-invalid-color`
zoglo Aug 15, 2025
4bee315
Add a test to check for the `invalid` state
zoglo Aug 15, 2025
9c341ba
Uncomment the test for now
zoglo Aug 15, 2025
73b53be
Run CS
zoglo Aug 15, 2025
292015e
Comment out form validation within the index.html
zoglo Aug 15, 2025
d6ae2f7
Update choices.css
Xon Aug 16, 2025
b624ad8
Build JS & CSS files
Xon Aug 16, 2025
1fad461
Revert "Uncomment the test for now"
Xon Aug 16, 2025
520bf8c
Revert "Comment out form validation within the index.html"
Xon Aug 16, 2025
5a74da6
Lint fixes
Xon Aug 16, 2025
ed03611
Update e2e screenshots
Xon Aug 16, 2025
bf0a412
Tweak invalid-state e2e test
Xon Aug 16, 2025
377523f
Update e2e screenshots
Xon Aug 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ import "choices.js/public/assets/styles/choices.css";
selectedState: ['is-selected'],
flippedState: ['is-flipped'],
loadingState: ['is-loading'],
invalidState: ['is-invalid'],
notice: ['choices__notice'],
addChoice: ['choices__item--selectable', 'add-choice'],
noResults: ['has-no-results'],
Expand Down Expand Up @@ -786,6 +787,7 @@ classNames: {
selectedState: ['is-selected'],
flippedState: ['is-flipped'],
loadingState: ['is-loading'],
invalidState: ['is-invalid'],
notice: ['choices__notice'],
addChoice: ['choices__item--selectable', 'add-choice'],
noResults: ['has-no-results'],
Expand Down
32 changes: 32 additions & 0 deletions public/assets/scripts/choices.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,6 +435,12 @@
Container.prototype.removeFocusState = function () {
removeClassesFromElement(this.element, this.classNames.focusState);
};
Container.prototype.addInvalidState = function () {
addClassesToElement(this.element, this.classNames.invalidState);
};
Container.prototype.removeInvalidState = function () {
removeClassesFromElement(this.element, this.classNames.invalidState);
};
Container.prototype.enable = function () {
removeClassesFromElement(this.element, this.classNames.disabledState);
this.element.removeAttribute('aria-disabled');
Expand Down Expand Up @@ -946,6 +952,7 @@
selectedState: ['is-selected'],
flippedState: ['is-flipped'],
loadingState: ['is-loading'],
invalidState: ['is-invalid'],
notice: ['choices__notice'],
addChoice: ['choices__item--selectable', 'add-choice'],
noResults: ['has-no-results'],
Expand Down Expand Up @@ -3461,6 +3468,8 @@
this._onEscapeKey = this._onEscapeKey.bind(this);
this._onDirectionKey = this._onDirectionKey.bind(this);
this._onDeleteKey = this._onDeleteKey.bind(this);
this._onChange = this._onChange.bind(this);
this._onInvalid = this._onInvalid.bind(this);
// If element has already been initialised with Choices, fail silently
if (this.passedElement.isActive) {
if (!config.silent) {
Expand Down Expand Up @@ -4494,6 +4503,7 @@
var documentElement = this._docRoot;
var outerElement = this.containerOuter.element;
var inputElement = this.input.element;
var passedElement = this.passedElement.element;
// capture events - can cancel event processing or propagation
documentElement.addEventListener('touchend', this._onTouchEnd, true);
outerElement.addEventListener('keydown', this._onKeyDown, true);
Expand Down Expand Up @@ -4531,12 +4541,21 @@
passive: true,
});
}
if (passedElement.hasAttribute('required')) {
passedElement.addEventListener('change', this._onChange, {
passive: true,
});
passedElement.addEventListener('invalid', this._onInvalid, {
passive: true,
});
}
this.input.addEventListeners();
};
Choices.prototype._removeEventListeners = function () {
var documentElement = this._docRoot;
var outerElement = this.containerOuter.element;
var inputElement = this.input.element;
var passedElement = this.passedElement.element;
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
outerElement.removeEventListener('keydown', this._onKeyDown, true);
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
Expand All @@ -4554,6 +4573,10 @@
if (inputElement.form) {
inputElement.form.removeEventListener('reset', this._onFormReset);
}
if (passedElement.hasAttribute('required')) {
passedElement.removeEventListener('change', this._onChange);
passedElement.removeEventListener('invalid', this._onInvalid);
}
this.input.removeEventListeners();
};
Choices.prototype._onKeyDown = function (event) {
Expand Down Expand Up @@ -4936,6 +4959,15 @@
}
});
};
Choices.prototype._onChange = function (event) {
if (!event.target.checkValidity()) {
return;
}
this.containerOuter.removeInvalidState();
};
Choices.prototype._onInvalid = function () {
this.containerOuter.addInvalidState();
};
Choices.prototype._highlightChoice = function (el) {
if (el === void 0) { el = null; }
var choices = Array.from(this.dropdown.element.querySelectorAll(selectableChoiceIdentifier));
Expand Down
2 changes: 1 addition & 1 deletion public/assets/scripts/choices.min.js
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 32 additions & 0 deletions public/assets/scripts/choices.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,12 @@ var Container = /** @class */ (function () {
Container.prototype.removeFocusState = function () {
removeClassesFromElement(this.element, this.classNames.focusState);
};
Container.prototype.addInvalidState = function () {
addClassesToElement(this.element, this.classNames.invalidState);
};
Container.prototype.removeInvalidState = function () {
removeClassesFromElement(this.element, this.classNames.invalidState);
};
Container.prototype.enable = function () {
removeClassesFromElement(this.element, this.classNames.disabledState);
this.element.removeAttribute('aria-disabled');
Expand Down Expand Up @@ -940,6 +946,7 @@ var DEFAULT_CLASSNAMES = {
selectedState: ['is-selected'],
flippedState: ['is-flipped'],
loadingState: ['is-loading'],
invalidState: ['is-invalid'],
notice: ['choices__notice'],
addChoice: ['choices__item--selectable', 'add-choice'],
noResults: ['has-no-results'],
Expand Down Expand Up @@ -3455,6 +3462,8 @@ var Choices = /** @class */ (function () {
this._onEscapeKey = this._onEscapeKey.bind(this);
this._onDirectionKey = this._onDirectionKey.bind(this);
this._onDeleteKey = this._onDeleteKey.bind(this);
this._onChange = this._onChange.bind(this);
this._onInvalid = this._onInvalid.bind(this);
// If element has already been initialised with Choices, fail silently
if (this.passedElement.isActive) {
if (!config.silent) {
Expand Down Expand Up @@ -4488,6 +4497,7 @@ var Choices = /** @class */ (function () {
var documentElement = this._docRoot;
var outerElement = this.containerOuter.element;
var inputElement = this.input.element;
var passedElement = this.passedElement.element;
// capture events - can cancel event processing or propagation
documentElement.addEventListener('touchend', this._onTouchEnd, true);
outerElement.addEventListener('keydown', this._onKeyDown, true);
Expand Down Expand Up @@ -4525,12 +4535,21 @@ var Choices = /** @class */ (function () {
passive: true,
});
}
if (passedElement.hasAttribute('required')) {
passedElement.addEventListener('change', this._onChange, {
passive: true,
});
passedElement.addEventListener('invalid', this._onInvalid, {
passive: true,
});
}
this.input.addEventListeners();
};
Choices.prototype._removeEventListeners = function () {
var documentElement = this._docRoot;
var outerElement = this.containerOuter.element;
var inputElement = this.input.element;
var passedElement = this.passedElement.element;
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
outerElement.removeEventListener('keydown', this._onKeyDown, true);
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
Expand All @@ -4548,6 +4567,10 @@ var Choices = /** @class */ (function () {
if (inputElement.form) {
inputElement.form.removeEventListener('reset', this._onFormReset);
}
if (passedElement.hasAttribute('required')) {
passedElement.removeEventListener('change', this._onChange);
passedElement.removeEventListener('invalid', this._onInvalid);
}
this.input.removeEventListeners();
};
Choices.prototype._onKeyDown = function (event) {
Expand Down Expand Up @@ -4930,6 +4953,15 @@ var Choices = /** @class */ (function () {
}
});
};
Choices.prototype._onChange = function (event) {
if (!event.target.checkValidity()) {
return;
}
this.containerOuter.removeInvalidState();
};
Choices.prototype._onInvalid = function () {
this.containerOuter.addInvalidState();
};
Choices.prototype._highlightChoice = function (el) {
if (el === void 0) { el = null; }
var choices = Array.from(this.dropdown.element.querySelectorAll(selectableChoiceIdentifier));
Expand Down
32 changes: 32 additions & 0 deletions public/assets/scripts/choices.search-basic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,6 +435,12 @@
Container.prototype.removeFocusState = function () {
removeClassesFromElement(this.element, this.classNames.focusState);
};
Container.prototype.addInvalidState = function () {
addClassesToElement(this.element, this.classNames.invalidState);
};
Container.prototype.removeInvalidState = function () {
removeClassesFromElement(this.element, this.classNames.invalidState);
};
Container.prototype.enable = function () {
removeClassesFromElement(this.element, this.classNames.disabledState);
this.element.removeAttribute('aria-disabled');
Expand Down Expand Up @@ -946,6 +952,7 @@
selectedState: ['is-selected'],
flippedState: ['is-flipped'],
loadingState: ['is-loading'],
invalidState: ['is-invalid'],
notice: ['choices__notice'],
addChoice: ['choices__item--selectable', 'add-choice'],
noResults: ['has-no-results'],
Expand Down Expand Up @@ -2982,6 +2989,8 @@
this._onEscapeKey = this._onEscapeKey.bind(this);
this._onDirectionKey = this._onDirectionKey.bind(this);
this._onDeleteKey = this._onDeleteKey.bind(this);
this._onChange = this._onChange.bind(this);
this._onInvalid = this._onInvalid.bind(this);
// If element has already been initialised with Choices, fail silently
if (this.passedElement.isActive) {
if (!config.silent) {
Expand Down Expand Up @@ -4015,6 +4024,7 @@
var documentElement = this._docRoot;
var outerElement = this.containerOuter.element;
var inputElement = this.input.element;
var passedElement = this.passedElement.element;
// capture events - can cancel event processing or propagation
documentElement.addEventListener('touchend', this._onTouchEnd, true);
outerElement.addEventListener('keydown', this._onKeyDown, true);
Expand Down Expand Up @@ -4052,12 +4062,21 @@
passive: true,
});
}
if (passedElement.hasAttribute('required')) {
passedElement.addEventListener('change', this._onChange, {
passive: true,
});
passedElement.addEventListener('invalid', this._onInvalid, {
passive: true,
});
}
this.input.addEventListeners();
};
Choices.prototype._removeEventListeners = function () {
var documentElement = this._docRoot;
var outerElement = this.containerOuter.element;
var inputElement = this.input.element;
var passedElement = this.passedElement.element;
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
outerElement.removeEventListener('keydown', this._onKeyDown, true);
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
Expand All @@ -4075,6 +4094,10 @@
if (inputElement.form) {
inputElement.form.removeEventListener('reset', this._onFormReset);
}
if (passedElement.hasAttribute('required')) {
passedElement.removeEventListener('change', this._onChange);
passedElement.removeEventListener('invalid', this._onInvalid);
}
this.input.removeEventListeners();
};
Choices.prototype._onKeyDown = function (event) {
Expand Down Expand Up @@ -4457,6 +4480,15 @@
}
});
};
Choices.prototype._onChange = function (event) {
if (!event.target.checkValidity()) {
return;
}
this.containerOuter.removeInvalidState();
};
Choices.prototype._onInvalid = function () {
this.containerOuter.addInvalidState();
};
Choices.prototype._highlightChoice = function (el) {
if (el === void 0) { el = null; }
var choices = Array.from(this.dropdown.element.querySelectorAll(selectableChoiceIdentifier));
Expand Down
2 changes: 1 addition & 1 deletion public/assets/scripts/choices.search-basic.min.js
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 32 additions & 0 deletions public/assets/scripts/choices.search-basic.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,12 @@ var Container = /** @class */ (function () {
Container.prototype.removeFocusState = function () {
removeClassesFromElement(this.element, this.classNames.focusState);
};
Container.prototype.addInvalidState = function () {
addClassesToElement(this.element, this.classNames.invalidState);
};
Container.prototype.removeInvalidState = function () {
removeClassesFromElement(this.element, this.classNames.invalidState);
};
Container.prototype.enable = function () {
removeClassesFromElement(this.element, this.classNames.disabledState);
this.element.removeAttribute('aria-disabled');
Expand Down Expand Up @@ -940,6 +946,7 @@ var DEFAULT_CLASSNAMES = {
selectedState: ['is-selected'],
flippedState: ['is-flipped'],
loadingState: ['is-loading'],
invalidState: ['is-invalid'],
notice: ['choices__notice'],
addChoice: ['choices__item--selectable', 'add-choice'],
noResults: ['has-no-results'],
Expand Down Expand Up @@ -2976,6 +2983,8 @@ var Choices = /** @class */ (function () {
this._onEscapeKey = this._onEscapeKey.bind(this);
this._onDirectionKey = this._onDirectionKey.bind(this);
this._onDeleteKey = this._onDeleteKey.bind(this);
this._onChange = this._onChange.bind(this);
this._onInvalid = this._onInvalid.bind(this);
// If element has already been initialised with Choices, fail silently
if (this.passedElement.isActive) {
if (!config.silent) {
Expand Down Expand Up @@ -4009,6 +4018,7 @@ var Choices = /** @class */ (function () {
var documentElement = this._docRoot;
var outerElement = this.containerOuter.element;
var inputElement = this.input.element;
var passedElement = this.passedElement.element;
// capture events - can cancel event processing or propagation
documentElement.addEventListener('touchend', this._onTouchEnd, true);
outerElement.addEventListener('keydown', this._onKeyDown, true);
Expand Down Expand Up @@ -4046,12 +4056,21 @@ var Choices = /** @class */ (function () {
passive: true,
});
}
if (passedElement.hasAttribute('required')) {
passedElement.addEventListener('change', this._onChange, {
passive: true,
});
passedElement.addEventListener('invalid', this._onInvalid, {
passive: true,
});
}
this.input.addEventListeners();
};
Choices.prototype._removeEventListeners = function () {
var documentElement = this._docRoot;
var outerElement = this.containerOuter.element;
var inputElement = this.input.element;
var passedElement = this.passedElement.element;
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
outerElement.removeEventListener('keydown', this._onKeyDown, true);
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
Expand All @@ -4069,6 +4088,10 @@ var Choices = /** @class */ (function () {
if (inputElement.form) {
inputElement.form.removeEventListener('reset', this._onFormReset);
}
if (passedElement.hasAttribute('required')) {
passedElement.removeEventListener('change', this._onChange);
passedElement.removeEventListener('invalid', this._onInvalid);
}
this.input.removeEventListeners();
};
Choices.prototype._onKeyDown = function (event) {
Expand Down Expand Up @@ -4451,6 +4474,15 @@ var Choices = /** @class */ (function () {
}
});
};
Choices.prototype._onChange = function (event) {
if (!event.target.checkValidity()) {
return;
}
this.containerOuter.removeInvalidState();
};
Choices.prototype._onInvalid = function () {
this.containerOuter.addInvalidState();
};
Choices.prototype._highlightChoice = function (el) {
if (el === void 0) { el = null; }
var choices = Array.from(this.dropdown.element.querySelectorAll(selectableChoiceIdentifier));
Expand Down
Loading
Loading