Replaced the function-based JavaScript with the object-oriented AccountForm class for the currency form.

src/accounting/static/js/account-form.js

@@ -24,171 +24,335 @@
 
 // Initializes the page JavaScript.
 document.addEventListener("DOMContentLoaded", () => {
-    initializeBaseAccountSelector();
-    document.getElementById("accounting-base-code")
-        .onchange = validateBase;
-    document.getElementById("accounting-title")
-        .onchange = validateTitle;
-    document.getElementById("accounting-form")
-        .onsubmit = validateForm;
+    AccountForm.initialize();
 });
 
 /**
- * Initializes the base account selector.
+ * The account form.
  *
  * @private
  */
-function initializeBaseAccountSelector() {
-    const selector = document.getElementById("accounting-base-selector-modal");
-    const base = document.getElementById("accounting-base");
-    const baseCode = document.getElementById("accounting-base-code");
-    const baseContent = document.getElementById("accounting-base-content");
-    const isOffsetNeededControl = document.getElementById("accounting-is-offset-needed-control");
-    const isOffsetNeeded = document.getElementById("accounting-is-offset-needed");
-    const options = Array.from(document.getElementsByClassName("accounting-base-option"));
-    const btnClear = document.getElementById("accounting-btn-clear-base");
-    base.onclick = () => {
-        base.classList.add("accounting-not-empty");
-        for (const option of options) {
-            option.classList.remove("active");
-        }
-        const selected = document.getElementById("accounting-base-option-" + baseCode.value);
-        if (selected !== null) {
-            selected.classList.add("active");
-        }
-    };
-    selector.addEventListener("hidden.bs.modal", () => {
-        if (baseCode.value === "") {
-            base.classList.remove("accounting-not-empty");
-        }
-    });
-    for (const option of options) {
-        option.onclick = () => {
-            baseCode.value = option.dataset.code;
-            baseContent.innerText = option.dataset.content;
-            if (["1", "2"].includes(option.dataset.content.substring(0, 1))) {
-                isOffsetNeededControl.classList.remove("d-none");
-                isOffsetNeeded.disabled = false;
-            } else {
-                isOffsetNeededControl.classList.add("d-none");
-                isOffsetNeeded.disabled = true;
-                isOffsetNeeded.checked = false;
-            }
-            btnClear.classList.add("btn-danger");
-            btnClear.classList.remove("btn-secondary")
-            btnClear.disabled = false;
-            validateBase();
-            bootstrap.Modal.getInstance(selector).hide();
+class AccountForm {
+
+    /**
+     * The base account selector
+     * @type {BaseAccountSelector}
+     */
+    #baseAccountSelector;
+
+    /**
+     * The form element
+     * @type {HTMLFormElement}
+     */
+    #formElement;
+
+    /**
+     * The control of the base account
+     * @type {HTMLDivElement}
+     */
+    #baseControl;
+
+    /**
+     * The input of the base account
+     * @type {HTMLInputElement}
+     */
+    #baseCode;
+
+    /**
+     * The base account
+     * @type {HTMLDivElement}
+     */
+    #base;
+
+    /**
+     * The error message for the base account
+     * @type {HTMLDivElement}
+     */
+    #baseError;
+
+    /**
+     * The title
+     * @type {HTMLInputElement}
+     */
+    #title;
+
+    /**
+     * The error message of the title
+     * @type {HTMLDivElement}
+     */
+    #titleError;
+
+    /**
+     * The control of the is-offset-needed option
+     * @type {HTMLDivElement}
+     */
+    #isOffsetNeededControl;
+
+    /**
+     * The is-offset-needed option
+     * @type {HTMLInputElement}
+     */
+    #isOffsetNeeded;
+
+    /**
+     * Constructs the account form.
+     *
+     */
+    constructor() {
+        this.#baseAccountSelector = new BaseAccountSelector(this);
+        this.#formElement = document.getElementById("accounting-form");
+        this.#baseControl = document.getElementById("accounting-base-control");
+        this.#baseCode = document.getElementById("accounting-base-code");
+        this.#base = document.getElementById("accounting-base");
+        this.#baseError = document.getElementById("accounting-base-error");
+        this.#title = document.getElementById("accounting-title");
+        this.#titleError = document.getElementById("accounting-title-error");
+        this.#isOffsetNeededControl = document.getElementById("accounting-is-offset-needed-control");
+        this.#isOffsetNeeded = document.getElementById("accounting-is-offset-needed");
+        this.#formElement.onsubmit = () => {
+            return this.#validateForm();
+        };
+        this.#baseControl.onclick = () => {
+            this.#baseControl.classList.add("accounting-not-empty");
+            this.#baseAccountSelector.onOpen(this.#baseCode.value);
         };
     }
-    btnClear.onclick = () => {
-        baseCode.value = "";
-        baseContent.innerText = "";
-        btnClear.classList.add("btn-secondary")
-        btnClear.classList.remove("btn-danger");
-        btnClear.disabled = true;
-        validateBase();
-        bootstrap.Modal.getInstance(selector).hide();
+
+    /**
+     * The callback when the base account selector is closed.
+     *
+     */
+    onBaseAccountSelectorClosed() {
+        if (this.#baseCode.value === "") {
+            this.#baseControl.classList.remove("accounting-not-empty");
+        }
+    }
+
+    /**
+     * Sets the base account.
+     *
+     * @param code {string} the base account code
+     * @param text {string} the text for the base account
+     */
+    setBaseAccount(code, text) {
+        this.#baseCode.value = code;
+        this.#base.innerText = text;
+        if (["1", "2"].includes(code.substring(0, 1))) {
+            this.#isOffsetNeededControl.classList.remove("d-none");
+            this.#isOffsetNeeded.disabled = false;
+        } else {
+            this.#isOffsetNeededControl.classList.add("d-none");
+            this.#isOffsetNeeded.disabled = true;
+            this.#isOffsetNeeded.checked = false;
+        }
+        this.#validateBase();
+    }
+
+    /**
+     * Clears the base account.
+     *
+     */
+    clearBaseAccount() {
+        this.#baseCode.value = "";
+        this.#base.innerText = "";
+        this.#validateBase();
+    }
+
+    /**
+     * Validates the form.
+     *
+     * @returns {boolean} true if valid, or false otherwise
+     */
+    #validateForm() {
+        let isValid = true;
+        isValid = this.#validateBase() && isValid;
+        isValid = this.#validateTitle() && isValid;
+        return isValid;
+    }
+
+    /**
+     * Validates the base account.
+     *
+     * @returns {boolean} true if valid, or false otherwise
+     */
+    #validateBase() {
+        if (this.#baseCode.value === "") {
+            this.#baseControl.classList.add("is-invalid");
+            this.#baseError.innerText = A_("Please select the base account.");
+            return false;
+        }
+        this.#baseControl.classList.remove("is-invalid");
+        this.#baseError.innerText = "";
+        return true;
+    }
+
+    /**
+     * Validates the title.
+     *
+     * @returns {boolean} true if valid, or false otherwise
+     */
+    #validateTitle() {
+        this.#title.value = this.#title.value.trim();
+        if (this.#title.value === "") {
+            this.#title.classList.add("is-invalid");
+            this.#titleError.innerText = A_("Please fill in the title.");
+            return false;
+        }
+        this.#title.classList.remove("is-invalid");
+        this.#titleError.innerText = "";
+        return true;
+    }
+
+    /**
+     * The account form
+     * @type {AccountForm} the form
+     */
+    static #form;
+
+    static initialize() {
+        this.#form = new AccountForm();
     }
-    initializeBaseAccountQuery();
 }
 
 /**
- * Initializes the query on the base account options.
+ * The base account selector.
  *
  * @private
  */
-function initializeBaseAccountQuery() {
-    const query = document.getElementById("accounting-base-selector-query");
-    const optionList = document.getElementById("accounting-base-option-list");
-    const options = Array.from(document.getElementsByClassName("accounting-base-option"));
-    const queryNoResult = document.getElementById("accounting-base-option-no-result");
-    query.addEventListener("input", () => {
-        if (query.value === "") {
-            for (const option of options) {
-                option.classList.remove("d-none");
-            }
-            optionList.classList.remove("d-none");
-            queryNoResult.classList.add("d-none");
-            return
+class BaseAccountSelector {
+
+    /**
+     * The account form
+     * @type {AccountForm}
+     */
+    #form;
+
+    /**
+     * The selector modal
+     * @type {HTMLDivElement}
+     */
+    #modal;
+
+    /**
+     * The query input
+     * @type {HTMLInputElement}
+     */
+    #query;
+
+    /**
+     * The error message when the query has no result
+     * @type {HTMLParagraphElement}
+     */
+    #queryNoResult;
+
+    /**
+     * The option list
+     * @type {HTMLUListElement}
+     */
+    #optionList;
+
+    /**
+     * The options
+     * @type {HTMLLIElement[]}
+     */
+    #options;
+
+    /**
+     * The button to clear the base account value
+     * @type {HTMLButtonElement}
+     */
+    #clearButton;
+
+    /**
+     * Constructs the base account selector.
+     *
+     * @param form {AccountForm} the form
+     */
+    constructor(form) {
+        this.#form = form;
+        this.#modal = document.getElementById("accounting-base-selector-modal");
+        this.#query = document.getElementById("accounting-base-selector-query");
+        this.#optionList = document.getElementById("accounting-base-selector-option-list");
+        // noinspection JSValidateTypes
+        this.#options = Array.from(document.getElementsByClassName("accounting-base-selector-option"));
+        this.#clearButton = document.getElementById("accounting-base-selector-clear");
+        this.#queryNoResult = document.getElementById("accounting-base-selector-option-no-result");
+        this.#modal.addEventListener("hidden.bs.modal", () => {
+            this.#form.onBaseAccountSelectorClosed();
+        });
+        for (const option of this.#options) {
+            option.onclick = () => {
+                this.#form.setBaseAccount(option.dataset.code, option.dataset.content);
+            };
         }
-        let hasAnyMatched = false;
-        for (const option of options) {
-            const queryValues = JSON.parse(option.dataset.queryValues);
-            let isMatched = false;
-            for (const queryValue of queryValues) {
-                if (queryValue.includes(query.value)) {
-                    isMatched = true;
-                    break;
+        this.#clearButton.onclick = () => {
+            this.#form.clearBaseAccount();
+        };
+        this.#initializeBaseAccountQuery();
+    }
+
+    /**
+     * Initializes the query.
+     *
+     */
+    #initializeBaseAccountQuery() {
+        this.#query.addEventListener("input", () => {
+            if (this.#query.value === "") {
+                for (const option of this.#options) {
+                    option.classList.remove("d-none");
+                }
+                this.#optionList.classList.remove("d-none");
+                this.#queryNoResult.classList.add("d-none");
+                return
+            }
+            let hasAnyMatched = false;
+            for (const option of this.#options) {
+                const queryValues = JSON.parse(option.dataset.queryValues);
+                let isMatched = false;
+                for (const queryValue of queryValues) {
+                    if (queryValue.includes(this.#query.value)) {
+                        isMatched = true;
+                        break;
+                    }
+                }
+                if (isMatched) {
+                    option.classList.remove("d-none");
+                    hasAnyMatched = true;
+                } else {
+                    option.classList.add("d-none");
                 }
             }
-            if (isMatched) {
-                option.classList.remove("d-none");
-                hasAnyMatched = true;
+            if (!hasAnyMatched) {
+                this.#optionList.classList.add("d-none");
+                this.#queryNoResult.classList.remove("d-none");
             } else {
-                option.classList.add("d-none");
+                this.#optionList.classList.remove("d-none");
+                this.#queryNoResult.classList.add("d-none");
+            }
+        });
+    }
+
+    /**
+     * The callback when the base account selector is shown.
+     *
+     * @param baseCode {string} the active base code
+     */
+    onOpen(baseCode) {
+        for (const option of this.#options) {
+            if (option.dataset.code === baseCode) {
+                option.classList.add("active");
+            } else {
+                option.classList.remove("active");
             }
         }
-        if (!hasAnyMatched) {
-            optionList.classList.add("d-none");
-            queryNoResult.classList.remove("d-none");
+        if (baseCode === "") {
+            this.#clearButton.classList.add("btn-secondary")
+            this.#clearButton.classList.remove("btn-danger");
+            this.#clearButton.disabled = true;
         } else {
-            optionList.classList.remove("d-none");
-            queryNoResult.classList.add("d-none");
+            this.#clearButton.classList.add("btn-danger");
+            this.#clearButton.classList.remove("btn-secondary")
+            this.#clearButton.disabled = false;
         }
-    });
-}
-
-/**
- * Validates the form.
- *
- * @returns {boolean} true if valid, or false otherwise
- * @private
- */
-function validateForm() {
-    let isValid = true;
-    isValid = validateBase() && isValid;
-    isValid = validateTitle() && isValid;
-    return isValid;
-}
-
-/**
- * Validates the base account.
- *
- * @returns {boolean} true if valid, or false otherwise
- * @private
- */
-function validateBase() {
-    const field = document.getElementById("accounting-base-code");
-    const error = document.getElementById("accounting-base-code-error");
-    const displayField = document.getElementById("accounting-base");
-    field.value = field.value.trim();
-    if (field.value === "") {
-        displayField.classList.add("is-invalid");
-        error.innerText = A_("Please select the base account.");
-        return false;
     }
-    displayField.classList.remove("is-invalid");
-    error.innerText = "";
-    return true;
-}
-
-/**
- * Validates the title.
- *
- * @returns {boolean} true if valid, or false otherwise
- * @private
- */
-function validateTitle() {
-    const field = document.getElementById("accounting-title");
-    const error = document.getElementById("accounting-title-error");
-    field.value = field.value.trim();
-    if (field.value === "") {
-        field.classList.add("is-invalid");
-        error.innerText = A_("Please fill in the title.");
-        return false;
-    }
-    field.classList.remove("is-invalid");
-    error.innerText = "";
-    return true;
 }

src/accounting/static/js/currency-form.js

@@ -24,152 +24,151 @@
 
 // Initializes the page JavaScript.
 document.addEventListener("DOMContentLoaded", () => {
-    document.getElementById("accounting-code")
-        .onchange = validateCode;
-    document.getElementById("accounting-name")
-        .onchange = validateName;
-    document.getElementById("accounting-form")
-        .onsubmit = validateForm;
+    CurrencyForm.initialize();
 });
 
 /**
- * The asynchronous validation result
- * @type {object}
- * @private
- */
-let isAsyncValid = {};
-
-/**
- * Validates the form.
- *
- * @returns {boolean} true if valid, or false otherwise
- * @private
- */
-function validateForm() {
-    isAsyncValid = {
-        "code": false,
-        "_sync": false,
-    };
-    let isValid = true;
-    isValid = validateCode() && isValid;
-    isValid = validateName() && isValid;
-    isAsyncValid["_sync"] = isValid;
-    submitFormIfAllAsyncValid();
-    return false;
-}
-
-/**
- * Submits the form if the whole form passed the asynchronous
- * validations.
+ * The currency form.
  *
  * @private
  */
-function submitFormIfAllAsyncValid() {
-    let isValid = true;
-    for (const key of Object.keys(isAsyncValid)) {
-        isValid = isAsyncValid[key] && isValid;
-    }
-    if (isValid) {
-        document.getElementById("accounting-form").submit()
-    }
-}
+class CurrencyForm {
 
-/**
- * Validates the code.
- *
- * @param changeEvent {Event} the change event, if invoked from onchange
- * @returns {boolean} true if valid, or false otherwise
- * @private
- */
-function validateCode(changeEvent = null) {
-    const key = "code";
-    const isSubmission = changeEvent === null;
-    let hasAsyncValidation = false;
-    const field = document.getElementById("accounting-code");
-    const error = document.getElementById("accounting-code-error");
-    field.value = field.value.trim();
-    if (field.value === "") {
-        field.classList.add("is-invalid");
-        error.innerText = A_("Please fill in the code.");
-        return false;
-    }
-    const blocklist = JSON.parse(field.dataset.blocklist);
-    if (blocklist.includes(field.value)) {
-        field.classList.add("is-invalid");
-        error.innerText = A_("This code is not available.");
-        return false;
-    }
-    if (!field.value.match(/^[A-Z]{3}$/)) {
-        field.classList.add("is-invalid");
-        error.innerText = A_("Code can only be composed of 3 upper-cased letters.");
-        return false;
-    }
-    const original = field.dataset.original;
-    if (original === "" || field.value !== original) {
-        hasAsyncValidation = true;
-        validateAsyncCodeIsDuplicated(isSubmission, key);
-    }
-    if (!hasAsyncValidation) {
-        isAsyncValid[key] = true;
-        field.classList.remove("is-invalid");
-        error.innerText = "";
-    }
-    return true;
-}
+    /**
+     * The form.
+     * @type {HTMLFormElement}
+     */
+    #formElement;
 
-/**
- * Validates asynchronously whether the code is duplicated.
- * The boolean validation result is stored in isAsyncValid[key].
- *
- * @param isSubmission {boolean} whether this is invoked from a form submission
- * @param key {string} the key to store the result in isAsyncValid
- * @private
- */
-function validateAsyncCodeIsDuplicated(isSubmission, key) {
-    const field = document.getElementById("accounting-code");
-    const error = document.getElementById("accounting-code-error");
-    const url = field.dataset.existsUrl;
-    const onLoad = function () {
-        if (this.status === 200) {
-            const result = JSON.parse(this.responseText);
-            if (result["exists"]) {
-                field.classList.add("is-invalid");
-                error.innerText = A_("Code conflicts with another currency.");
-                if (isSubmission) {
-                    isAsyncValid[key] = false;
+    /**
+     * The code
+     * @type {HTMLInputElement}
+     */
+    #code;
+
+    /**
+     * The error message of the code
+     * @type {HTMLDivElement}
+     */
+    #codeError;
+
+    /**
+     * The name
+     * @type {HTMLInputElement}
+     */
+    #name;
+
+    /**
+     * The error message of the name
+     * @type {HTMLDivElement}
+     */
+    #nameError;
+
+    /**
+     * Constructs the currency form.
+     *
+     */
+    constructor() {
+        this.#formElement = document.getElementById("accounting-form");
+        this.#code = document.getElementById("accounting-code");
+        this.#codeError = document.getElementById("accounting-code-error");
+        this.#name = document.getElementById("accounting-name");
+        this.#nameError = document.getElementById("accounting-name-error");
+        this.#code.onchange = () => {
+            this.#validateCode().then();
+        };
+        this.#name.onchange = () => {
+            this.#validateName();
+        };
+        this.#formElement.onsubmit = () => {
+            this.#validateForm().then((isValid) => {
+                if (isValid) {
+                    this.#formElement.submit();
                 }
-                return;
-            }
-            field.classList.remove("is-invalid");
-            error.innerText = "";
-            if (isSubmission) {
-                isAsyncValid[key] = true;
-                submitFormIfAllAsyncValid();
+            });
+            return false;
+        };
+    }
+
+    /**
+     * Validates the form.
+     *
+     * @returns {Promise<boolean>} true if valid, or false otherwise
+     */
+    async #validateForm() {
+        let isValid = true;
+        isValid = await this.#validateCode() && isValid;
+        isValid = this.#validateName() && isValid;
+        return isValid;
+    }
+
+    /**
+     * Validates the code.
+     *
+     * @param changeEvent {Event} the change event, if invoked from onchange
+     * @returns {Promise<boolean>} true if valid, or false otherwise
+     */
+    async #validateCode(changeEvent = null) {
+        this.#code.value = this.#code.value.trim();
+        if (this.#code.value === "") {
+            this.#code.classList.add("is-invalid");
+            this.#codeError.innerText = A_("Please fill in the code.");
+            return false;
+        }
+        const blocklist = JSON.parse(this.#code.dataset.blocklist);
+        if (blocklist.includes(this.#code.value)) {
+            this.#code.classList.add("is-invalid");
+            this.#codeError.innerText = A_("This code is not available.");
+            return false;
+        }
+        if (!this.#code.value.match(/^[A-Z]{3}$/)) {
+            this.#code.classList.add("is-invalid");
+            this.#codeError.innerText = A_("Code can only be composed of 3 upper-cased letters.");
+            return false;
+        }
+        const original = this.#code.dataset.original;
+        if (original === "" || this.#code.value !== original) {
+            const response = await fetch(this.#code.dataset.existsUrl + "?q=" + encodeURIComponent(this.#code.value));
+            const data = await response.json();
+            if (data["exists"]) {
+                this.#code.classList.add("is-invalid");
+                this.#codeError.innerText = A_("Code conflicts with another currency.");
+                return false;
             }
         }
-    };
-    const request = new XMLHttpRequest();
-    request.onload = onLoad;
-    request.open("GET", url + "?q=" + encodeURIComponent(field.value));
-    request.send();
-}
-
-/**
- * Validates the name.
- *
- * @returns {boolean} true if valid, or false otherwise
- * @private
- */
-function validateName() {
-    const field = document.getElementById("accounting-name");
-    const error = document.getElementById("accounting-name-error");
-    field.value = field.value.trim();
-    if (field.value === "") {
-        field.classList.add("is-invalid");
-        error.innerText = A_("Please fill in the name.");
-        return false;
+        this.#code.classList.remove("is-invalid");
+        this.#codeError.innerText = "";
+        return true;
+    }
+
+    /**
+     * Validates the name.
+     *
+     * @returns {boolean} true if valid, or false otherwise
+     */
+    #validateName() {
+        this.#name.value = this.#name.value.trim();
+        if (this.#name.value === "") {
+            this.#name.classList.add("is-invalid");
+            this.#nameError.innerText = A_("Please fill in the name.");
+            return false;
+        }
+        this.#name.classList.remove("is-invalid");
+        this.#nameError.innerText = "";
+        return true;
+    }
+
+    /**
+     * The form
+     * @type {CurrencyForm}
+     */
+    static #form;
+
+    /**
+     * Initializes the currency form.
+     *
+     */
+    static initialize() {
+        this.#form = new CurrencyForm();
     }
-    field.classList.remove("is-invalid");
-    error.innerText = "";
-    return true;
 }

src/accounting/templates/accounting/account/include/form.html

@@ -41,9 +41,9 @@ First written: 2023/2/1
   {% endif %}
   <div class="form-floating mb-3">
     <input id="accounting-base-code" type="hidden" name="base_code" value="{{ form.base_code.data|accounting_default }}">
-    <div id="accounting-base" class="form-control accounting-clickable accounting-material-text-field {% if form.base_code.data %} accounting-not-empty {% endif %} {% if form.base_code.errors %} is-invalid {% endif %}" data-bs-toggle="modal" data-bs-target="#accounting-base-selector-modal">
+    <div id="accounting-base-control" class="form-control accounting-clickable accounting-material-text-field {% if form.base_code.data %} accounting-not-empty {% endif %} {% if form.base_code.errors %} is-invalid {% endif %}" data-bs-toggle="modal" data-bs-target="#accounting-base-selector-modal">
       <label class="form-label" for="accounting-base">{{ A_("Base account") }}</label>
-      <div id="accounting-base-content">
+      <div id="accounting-base">
         {% if form.base_code.data %}
           {% if form.base_code.errors %}
             {{ A_("(Unknown)") }}
@@ -53,7 +53,7 @@ First written: 2023/2/1
         {% endif %}
       </div>
     </div>
-    <div id="accounting-base-code-error" class="invalid-feedback">{% if form.base_code.errors %}{{ form.base_code.errors[0] }}{% endif %}</div>
+    <div id="accounting-base-error" class="invalid-feedback">{% if form.base_code.errors %}{{ form.base_code.errors[0] }}{% endif %}</div>
   </div>
 
   <div class="form-floating mb-3">
@@ -99,21 +99,21 @@ First written: 2023/2/1
           </label>
         </div>
 
-        <ul id="accounting-base-option-list" class="list-group accounting-selector-list">
+        <ul id="accounting-base-selector-option-list" class="list-group accounting-selector-list">
           {% for base in form.base_options %}
-          <li id="accounting-base-option-{{ base.code }}" class="list-group-item accounting-base-option accounting-clickable" data-code="{{ base.code }}" data-content="{{ base }}" data-query-values="{{ base.query_values|tojson|forceescape }}">
-            {{ base }}
-          </li>
+            <li class="list-group-item accounting-clickable accounting-base-selector-option" data-code="{{ base.code }}" data-content="{{ base }}" data-query-values="{{ base.query_values|tojson|forceescape }}" data-bs-dismiss="modal">
+              {{ base }}
+            </li>
           {% endfor %}
         </ul>
-        <p id="accounting-base-option-no-result" class="d-none">{{ A_("There is no data.") }}</p>
+        <p id="accounting-base-selector-option-no-result" class="d-none">{{ A_("There is no data.") }}</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ A_("Cancel") }}</button>
         {% if form.base_code.data %}
-          <button id="accounting-btn-clear-base" type="button" class="btn btn-danger">{{ A_("Clear") }}</button>
+          <button id="accounting-base-selector-clear" type="button" class="btn btn-danger" data-bs-dismiss="modal">{{ A_("Clear") }}</button>
         {% else %}
-          <button id="accounting-btn-clear-base" type="button" class="btn btn-secondary" disabled="disabled">{{ A_("Clear") }}</button>
+          <button id="accounting-base-selector-clear" type="button" class="btn btn-secondary" disabled="disabled" data-bs-dismiss="modal">{{ A_("Clear") }}</button>
         {% endif %}
       </div>
     </div>

src/accounting/templates/accounting/transaction/expense/include/form-currency-item.html

@@ -24,7 +24,7 @@ First written: 2023/2/25
   <div id="accounting-currency-{{ currency_index }}-control" class="form-control accounting-currency-control {% if currency_errors %} is-invalid {% endif %}">
     <div class="d-flex justify-content-between mt-2 mb-3">
       <div class="form-floating accounting-currency-content">
-        <select id="accounting-currency-{{ currency_index }}-code" class="form-select" name="currency-{{ currency_index }}-code">
+        <select id="accounting-currency-{{ currency_index }}-code" class="form-select {% if currency_code_errors %} is-invalid {% endif %}" name="currency-{{ currency_index }}-code">
           {% for currency in accounting_currency_options() %}
             <option value="{{ currency.code }}" {% if currency.code == currency_code_data %} selected="selected" {% endif %}>{{ currency }}</option>
           {% endfor %}

src/accounting/templates/accounting/transaction/income/include/form-currency-item.html

@@ -24,7 +24,7 @@ First written: 2023/2/25
   <div id="accounting-currency-{{ currency_index }}-control" class="form-control accounting-currency-control {% if currency_errors %} is-invalid {% endif %}">
     <div class="d-flex justify-content-between mt-2 mb-3">
       <div class="form-floating accounting-currency-content">
-        <select id="accounting-currency-{{ currency_index }}-code" class="form-select" name="currency-{{ currency_index }}-code">
+        <select id="accounting-currency-{{ currency_index }}-code" class="form-select {% if currency_code_errors %} is-invalid {% endif %}" name="currency-{{ currency_index }}-code">
           {% for currency in accounting_currency_options() %}
             <option value="{{ currency.code }}" {% if currency.code == currency_code_data %} selected="selected" {% endif %}>{{ currency }}</option>
           {% endfor %}

src/accounting/templates/accounting/transaction/transfer/include/form-currency-item.html

@@ -24,7 +24,7 @@ First written: 2023/2/25
   <div id="accounting-currency-{{ currency_index }}-control" class="form-control accounting-currency-control {% if currency_errors %} is-invalid {% endif %}">
     <div class="d-flex justify-content-between mt-2 mb-3">
       <div class="form-floating accounting-currency-content">
-        <select id="accounting-currency-{{ currency_index }}-code" class="form-select" name="currency-{{ currency_index }}-code">
+        <select id="accounting-currency-{{ currency_index }}-code" class="form-select {% if currency_code_errors %} is-invalid {% endif %}" name="currency-{{ currency_index }}-code">
           {% for currency in accounting_currency_options() %}
             <option value="{{ currency.code }}" {% if currency.code == currency_code_data %} selected="selected" {% endif %}>{{ currency }}</option>
           {% endfor %}