檢核訊息合併至上面ErrorMessage

Altob.NtuInvoiceGateway/Pages/Invoice.cshtml

@@ -34,13 +34,10 @@
                     <h4 class="mb-0">消費者發票資訊填寫</h4>
                 </div>
                 <div class="card-body">
-                    @if (!string.IsNullOrEmpty(Model.ErrorMessage))
-                    {
-                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                            @Model.ErrorMessage
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                    }
+                    <div id="formErrorMessage" class="alert alert-danger alert-dismissible fade show @(string.IsNullOrEmpty(Model.ErrorMessage) ? "d-none" : string.Empty)" role="alert">
+                        <span id="formErrorMessageText">@Model.ErrorMessage</span>
+                        <button type="button" class="btn-close" aria-label="Close" data-error-close></button>
+                    </div>
 
                     @if (!string.IsNullOrEmpty(Model.SuccessMessage))
                     {
@@ -69,7 +66,7 @@
 
                         <div class="row mb-3">
                             <div class="col-md-6">
-                                <label asp-for="InvoiceData.Email" class="form-label">消費者信箱</label>
+                                <label asp-for="InvoiceData.Email" class="form-label">消費者信箱(寄送發票開立通知用)</label>
                                 <input asp-for="InvoiceData.Email" class="form-control" type="email" maxlength="64" placeholder="example@email.com" />
                                 <span asp-validation-for="InvoiceData.Email" class="text-danger"></span>
                             </div>
@@ -110,6 +107,29 @@
     @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            const errorAlert = document.getElementById('formErrorMessage');
+            const errorText = document.getElementById('formErrorMessageText');
+            const errorCloseBtn = errorAlert?.querySelector('[data-error-close]');
+
+            const showError = (message) => {
+                if (!errorAlert || !errorText) {
+                    alert(message);
+                    return;
+                }
+                errorText.textContent = message;
+                errorAlert.classList.remove('d-none');
+            };
+
+            const hideError = () => {
+                if (!errorAlert || !errorText) {
+                    return;
+                }
+                errorText.textContent = '';
+                errorAlert.classList.add('d-none');
+            };
+
+            errorCloseBtn?.addEventListener('click', hideError);
+
             const requiredGroup = [
                 document.querySelector('input[name="InvoiceData.Email"]'),
                 document.querySelector('input[name="InvoiceData.CarrierID"]'),
@@ -125,8 +145,11 @@
                 const hasValue = requiredGroup.some(field => field && field.value.trim() !== '');
                 if (!hasValue) {
                     event.preventDefault();
-                    alert('Email、手機條碼、購買者統編至少需填寫一項。');
+                    showError('Email、手機條碼、購買者統編至少需填寫一項。');
+                    return;
                 }
+
+                hideError();
             });
         });
     </script>