fix(ui): show concise error on form field validation failure during page load (#26818)

* fix(ui): show concise error on form field validation failure during page load

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* fix(ui): remove stray brace introduced by review suggestion

* test(ui): assert concise message when form validation returns HTTP 500

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

src/test/js/form-checker.test.js

@@ -39,8 +39,12 @@ describe("FormChecker.delayedCheck", () => {
     return new Promise((resolve) => setTimeout(resolve, 0));
   }
 
-  function respondWith(request, body) {
-    request.resolve({ text: () => Promise.resolve(body) });
+  function respondWith(request, body, status = 200) {
+    request.resolve({
+      ok: status >= 200 && status < 300,
+      status,
+      text: () => Promise.resolve(body),
+    });
     return settle();
   }
 
@@ -80,6 +84,24 @@ describe("FormChecker.delayedCheck", () => {
     expect(FormChecker.inProgress).toBe(0);
   });
 
+  it("shows a concise message instead of the error page when a check fails", async () => {
+    const target = validationArea();
+
+    FormChecker.delayedCheck("/check", "post", target);
+
+    await respondWith(
+      requests[0],
+      "<html><body><h1>Oops!</h1></body></html>",
+      500,
+    );
+
+    expect(target.textContent).toContain(
+      "An internal error occurred during form field validation (HTTP 500)",
+    );
+    expect(target.textContent).not.toContain("Oops!");
+    expect(FormChecker.inProgress).toBe(0);
+  });
+
   it("never sends a queued check that was aborted while waiting", async () => {
     const inFlight = validationArea();
     const outdated = validationArea();

war/src/main/webapp/scripts/hudson-behavior.js

@@ -318,7 +318,10 @@ var FormChecker = {
           x.text()
             .then((responseText) => {
               if (!(next.signal && next.signal.aborted)) {
-                updateValidationArea(next.target, responseText);
+                updateValidationArea(
+                  next.target,
+                  formatValidationResponse(x, responseText),
+                );
                 layoutUpdateCallback.call();
               }
             })
@@ -681,6 +684,13 @@ function fireEvent(element, event) {
 //========================================================
 // using tag names in CSS selector makes the processing faster
 
+function formatValidationResponse(response, responseText) {
+  // TODO Add i18n support
+  return response.ok
+    ? responseText
+    : `<div class="error">An internal error occurred during form field validation (HTTP ${response.status}). Please reload the page and if the problem persists, ask the administrator for help.</div>`;
+}
+
 /**
  * Updates the validation area for a form element
  * @param {HTMLElement} validationArea The validation area for a given form element
@@ -778,12 +788,10 @@ function registerValidator(e) {
     FormChecker.sendRequest(this.targetUrl(), {
       method: method,
       onComplete: function (response) {
-        // TODO Add i18n support
         response.text().then((responseText) => {
-          const errorMessage = `<div class="error">An internal error occurred during form field validation (HTTP ${response.status}). Please reload the page and if the problem persists, ask the administrator for help.</div>`;
           updateValidationArea(
             validationArea,
-            response.status === 200 ? responseText : errorMessage,
+            formatValidationResponse(response, responseText),
           );
         });
       },