Add validity checking
This commit is contained in:
parent
35490ff0e3
commit
f55e420cbc
2 changed files with 47 additions and 7 deletions
|
@ -3,6 +3,6 @@
|
||||||
"browser": "src/BetterSelect.js",
|
"browser": "src/BetterSelect.js",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"version": "1.4.2",
|
"version": "1.5.0",
|
||||||
"url": "https://darkwiiplayer.github.io/BetterSelect/"
|
"url": "https://darkwiiplayer.github.io/BetterSelect/"
|
||||||
}
|
}
|
||||||
|
|
|
@ -64,7 +64,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
|
|
||||||
#internals = this.attachInternals()
|
#internals = this.attachInternals()
|
||||||
static formAssociated = true
|
static formAssociated = true
|
||||||
static observedAttributes = Object.freeze(["placeholder", "search-placeholder"])
|
static observedAttributes = Object.freeze(["placeholder", "search-placeholder", "required"])
|
||||||
|
|
||||||
static styleSheet = css`
|
static styleSheet = css`
|
||||||
:host {
|
:host {
|
||||||
|
@ -235,6 +235,8 @@ export class BetterSelect extends HTMLElement {
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
this.setValidity()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -365,7 +367,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
|
|
||||||
/** @param {HTMLElement} option */
|
/** @param {HTMLElement} option */
|
||||||
setOption(option) {
|
setOption(option) {
|
||||||
this.setValue(option.dataset.value, option.innerText)
|
return this.setValue(option.dataset.value, option.innerText)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -377,6 +379,8 @@ export class BetterSelect extends HTMLElement {
|
||||||
this.dispatchEvent(new Event("change", {bubbles: true}));
|
this.dispatchEvent(new Event("change", {bubbles: true}));
|
||||||
this.#internals.setFormValue(value, state)
|
this.#internals.setFormValue(value, state)
|
||||||
this.text.innerText = state
|
this.text.innerText = state
|
||||||
|
|
||||||
|
this.setValidity()
|
||||||
}
|
}
|
||||||
|
|
||||||
get value() { return this.#value.value }
|
get value() { return this.#value.value }
|
||||||
|
@ -396,7 +400,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
this.list.replaceChildren()
|
this.list.replaceChildren()
|
||||||
for (const option of this.options) {
|
for (const option of this.options) {
|
||||||
this.list.append(f`<li tabindex="0" part="item" data-value="${option.value}">${option.innerText}</li>`)
|
this.list.append(f`<li tabindex="0" part="item" data-value="${option.value}">${option.innerText}</li>`)
|
||||||
if (option.selected) {
|
if (this.value == undefined && option.selected) {
|
||||||
this.value = option.value
|
this.value = option.value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -426,15 +430,51 @@ export class BetterSelect extends HTMLElement {
|
||||||
*/
|
*/
|
||||||
set name(name) { this.setAttribute("name", String(name)) }
|
set name(name) { this.setAttribute("name", String(name)) }
|
||||||
|
|
||||||
/**
|
|
||||||
* @return {HTMLFormElement}
|
|
||||||
*/
|
|
||||||
get form() { return this.#internals.form }
|
get form() { return this.#internals.form }
|
||||||
|
|
||||||
clear() {
|
clear() {
|
||||||
this.setValue(undefined, "")
|
this.setValue(undefined, "")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Boolean} disabled
|
||||||
|
*/
|
||||||
|
set disabled(disabled) { this.toggleAttribute("disabled", disabled) }
|
||||||
|
get disabled() { return this.hasAttribute("disabled") }
|
||||||
|
|
||||||
|
setValidity() {
|
||||||
|
if (this.required) {
|
||||||
|
const valid = Boolean(this.value)
|
||||||
|
if (valid) {
|
||||||
|
this.#internals.setValidity({})
|
||||||
|
} else {
|
||||||
|
this.#internals.setValidity({valueMissing: true}, "Please select an option.")
|
||||||
|
}
|
||||||
|
return valid
|
||||||
|
} else {
|
||||||
|
this.#internals.setValidity({})
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkValidity() { return this.#internals.checkValidity() }
|
||||||
|
|
||||||
|
get validity() { return this.#internals.validity }
|
||||||
|
|
||||||
|
get validationMessage() { return this.#internals.validationMessage }
|
||||||
|
|
||||||
|
get willValidate() { return this.#internals.willValidate }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Boolean} required
|
||||||
|
*/
|
||||||
|
set required(required) { this.toggleAttribute("required", required) }
|
||||||
|
get required() { return this.hasAttribute("required") }
|
||||||
|
|
||||||
|
reportValidity() { return this.#internals.reportValidity() }
|
||||||
|
|
||||||
|
requiredChanged() { this.setValidity() }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {String} name
|
* @param {String} name
|
||||||
* @param {String} before
|
* @param {String} before
|
||||||
|
|
Loading…
Reference in a new issue