Implement blocking rule validations on the server on blur

src/api/patronBlockingRules.ts (new) — validatePatronBlockingRuleExpression(serviceId, rule, csrfToken) — sends FormData POST, returns null on 200 or the error detail string on failure.
src/components/PatronAuthServices.tsx — Added additionalData: { csrfToken: ownProps.csrfToken } to mapStateToProps to thread the CSRF token through to the edit form.
src/components/PatronAuthServiceEditForm.tsx — Passes csrfToken and serviceId (this.props.item?.id) to both PatronBlockingRulesEditor instances.
src/components/PatronBlockingRulesEditor.tsx — Added csrfToken/serviceId props, serverErrors state, handleRuleBlur async handler, clear-on-edit logic in updateRule, and <div onBlur> wrapper + serverRuleError display in RuleFormListItem.
tests/jest/api/patronBlockingRules.test.ts (new) — 5 tests covering the API function (null on 200, detail string on 400, fallback string, correct headers, undefined serviceId).
tests/jest/components/PatronBlockingRulesEditor.test.tsx — Added 6 blur/server-error tests and added beforeEach/afterEach fetch mock setup to both describe blocks to prevent incidental blur events from failing unrelated tests.

Other changes:

.eslintrc — Added a @typescript-eslint/no-unused-vars rule override with three options:
argsIgnorePattern: "^_" — suppresses the _library, _protocol, _disabled parameter warnings in ServiceEditForm.tsx (and any similar _-prefixed intentionally-unused parameters elsewhere)
ignoreRestSiblings: true — suppresses the _id warnings in PatronBlockingRulesEditor.tsx, which is the standard ESLint way to allow the { _id, ...rest } "strip a key" pattern
varsIgnorePattern: "^_" — consistent _-prefix convention for variables too
ServiceEditForm.tsx — Renamed library → _library in isLibraryRemovalPermitted (the only parameter that didn't already have the _ prefix the others used)
PatronAuthServiceEditForm.tsx — Removed the unused PatronBlockingRule import
PatronBlockingRulesEditor.tsx — Added // eslint-disable-next-line jsx-a11y/no-static-element-interactions with an explanatory comment. The wrapper <div> is a focus-event delegation container (React's synthetic blur bubbles from the textarea), not an interactive element — an eslint-disable with a clear rationale is the honest and correct fix here rather than misusing a role to silence the rule.

Author: dbernstein

.eslintrc

@@ -39,7 +39,15 @@
     "react/no-find-dom-node": 0,
     "jsx-a11y/label-has-for": 0,
     "react/no-unescaped-entities": 0,
-    "@typescript-eslint/no-inferrable-types": 0
+    "@typescript-eslint/no-inferrable-types": 0,
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "ignoreRestSiblings": true
+      }
+    ]
   },
   "settings": {
     "react": {

src/api/patronBlockingRules.ts

@@ -0,0 +1,49 @@
+import { PatronBlockingRule } from "../interfaces";
+
+const VALIDATE_URL = "/admin/patron_auth_service_validate_patron_blocking_rule";
+
+/**
+ * Validate a patron blocking rule expression against live ILS data on the server.
+ *
+ * The server loads the saved PatronAuthService by serviceId, makes a live
+ * authentication call using its configured test credentials, and evaluates
+ * the rule expression against the real patron data returned.  Only parse/eval
+ * success or failure is reported — the boolean result is discarded.
+ *
+ * Returns null on success, or an error message string on failure.
+ */
+export const validatePatronBlockingRuleExpression = async (
+  serviceId: number | undefined,
+  rule: PatronBlockingRule,
+  csrfToken: string | undefined
+): Promise<string | null> => {
+  const formData = new FormData();
+  if (serviceId !== undefined) {
+    formData.append("service_id", String(serviceId));
+  }
+  formData.append("rule", rule.rule);
+  formData.append("name", rule.name);
+
+  const headers: Record<string, string> = {};
+  if (csrfToken) {
+    headers["X-CSRF-Token"] = csrfToken;
+  }
+
+  const res = await fetch(VALIDATE_URL, {
+    method: "POST",
+    headers,
+    body: formData,
+    credentials: "same-origin",
+  });
+
+  if (res.ok) {
+    return null;
+  }
+
+  try {
+    const data = await res.json();
+    return data.detail || "Rule validation failed.";
+  } catch {
+    return "Rule validation failed.";
+  }
+};

src/components/PatronAuthServiceEditForm.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import {
   LibraryWithSettingsData,
   PatronAuthServicesData,
-  PatronBlockingRule,
   ProtocolData,
 } from "../interfaces";
 import ServiceEditForm from "./ServiceEditForm";
@@ -59,6 +58,12 @@ export default class PatronAuthServiceEditForm extends ServiceEditForm<
         value={library.patron_blocking_rules || []}
         disabled={disabled}
         error={this.props.error}
+        csrfToken={this.props.additionalData?.csrfToken}
+        serviceId={
+          this.props.item?.id !== undefined
+            ? Number(this.props.item.id)
+            : undefined
+        }
       />
     );
   }
@@ -76,6 +81,12 @@ export default class PatronAuthServiceEditForm extends ServiceEditForm<
         value={[]}
         disabled={disabled}
         error={this.props.error}
+        csrfToken={this.props.additionalData?.csrfToken}
+        serviceId={
+          this.props.item?.id !== undefined
+            ? Number(this.props.item.id)
+            : undefined
+        }
       />
     );
   }

src/components/PatronAuthServices.tsx

@@ -70,6 +70,7 @@ function mapStateToProps(state, ownProps) {
   // of the create/edit form.
   return {
     data: data,
+    additionalData: { csrfToken: ownProps.csrfToken },
     responseBody:
       state.editor.patronAuthServices &&
       state.editor.patronAuthServices.successMessage,

src/components/PatronBlockingRulesEditor.tsx

@@ -4,6 +4,7 @@ import { FetchErrorData } from "@thepalaceproject/web-opds-client/lib/interfaces
 import { PatronBlockingRule } from "../interfaces";
 import EditableInput from "./EditableInput";
 import WithRemoveButton from "./WithRemoveButton";
+import { validatePatronBlockingRuleExpression } from "../api/patronBlockingRules";
 
 function extractErrorMessage(error: FetchErrorData): string | null {
   if (!error || error.status < 400) return null;
@@ -20,6 +21,8 @@ export interface PatronBlockingRulesEditorProps {
   value?: PatronBlockingRule[];
   disabled?: boolean;
   error?: FetchErrorData;
+  csrfToken?: string;
+  serviceId?: number;
 }
 
 export interface PatronBlockingRulesEditorHandle {
@@ -29,25 +32,30 @@ export interface PatronBlockingRulesEditorHandle {
 
 type RuleEntry = PatronBlockingRule & { _id: number };
 type ClientErrors = { [index: number]: { name?: boolean; rule?: boolean } };
+type ServerErrors = { [index: number]: string | null };
 
 interface RuleFormListItemProps {
   rule: RuleEntry;
   index: number;
   disabled: boolean;
   rowErrors: { name?: boolean; rule?: boolean };
+  serverRuleError?: string | null;
   error?: FetchErrorData;
   onRemove: () => void;
   onUpdate: (field: keyof PatronBlockingRule, value: string) => void;
+  onRuleBlur: () => void;
 }
 
 function RuleFormListItem({
   rule,
   index,
   disabled,
   rowErrors,
+  serverRuleError,
   error,
   onRemove,
   onUpdate,
+  onRuleBlur,
 }: RuleFormListItemProps) {
   const nameClientError = !!rowErrors.name;
   const ruleClientError = !!rowErrors.rule;
@@ -80,19 +88,31 @@ function RuleFormListItem({
               Rule Expression is required.
             </p>
           )}
-          <EditableInput
-            elementType="textarea"
-            label="Rule Expression"
-            name={`patron_blocking_rule_rule_${index}`}
-            value={rule.rule}
-            required={true}
-            disabled={disabled}
-            readOnly={disabled}
-            optionalText={false}
-            clientError={rowErrors.rule}
-            error={error}
-            onChange={(value) => onUpdate("rule", value)}
-          />
+          {serverRuleError && (
+            <p className="patron-blocking-rule-field-error text-danger">
+              {serverRuleError}
+            </p>
+          )}
+          {/* This div captures the focusout event that bubbles up from the
+              textarea inside it, triggering server-side rule validation on blur.
+              It is not an interactive element and has no keyboard/mouse role —
+              the textarea itself handles all user interaction. */}
+          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+          <div onBlur={onRuleBlur}>
+            <EditableInput
+              elementType="textarea"
+              label="Rule Expression"
+              name={`patron_blocking_rule_rule_${index}`}
+              value={rule.rule}
+              required={true}
+              disabled={disabled}
+              readOnly={disabled}
+              optionalText={false}
+              clientError={rowErrors.rule}
+              error={error}
+              onChange={(value) => onUpdate("rule", value)}
+            />
+          </div>
           <EditableInput
             elementType="textarea"
             label="Message (optional)"
@@ -113,14 +133,15 @@ function RuleFormListItem({
 const PatronBlockingRulesEditor = React.forwardRef<
   PatronBlockingRulesEditorHandle,
   PatronBlockingRulesEditorProps
->(({ value = [], disabled = false, error }, ref) => {
+>(({ value = [], disabled = false, error, csrfToken, serviceId }, ref) => {
   const nextId = React.useRef(0);
   const newId = () => nextId.current++;
 
   const [rules, setRules] = React.useState<RuleEntry[]>(() =>
     (value || []).map((r) => ({ ...r, _id: newId() }))
   );
   const [clientErrors, setClientErrors] = React.useState<ClientErrors>({});
+  const [serverErrors, setServerErrors] = React.useState<ServerErrors>({});
 
   const serverErrorMessage = extractErrorMessage(error);
 
@@ -166,6 +187,11 @@ const PatronBlockingRulesEditor = React.forwardRef<
       delete next[index];
       return next;
     });
+    setServerErrors((prev) => {
+      const next = { ...prev };
+      delete next[index];
+      return next;
+    });
   };
 
   const updateRule = (
@@ -182,6 +208,22 @@ const PatronBlockingRulesEditor = React.forwardRef<
         return { ...prev, [index]: { ...prev[index], [field]: !value } };
       });
     }
+    if (field === "rule") {
+      setServerErrors((prev) => ({ ...prev, [index]: null }));
+    }
+  };
+
+  const handleRuleBlur = async (index: number) => {
+    const rule = rules[index];
+    if (!rule || !rule.rule) {
+      return;
+    }
+    const errorMessage = await validatePatronBlockingRuleExpression(
+      serviceId,
+      rule,
+      csrfToken
+    );
+    setServerErrors((prev) => ({ ...prev, [index]: errorMessage }));
   };
 
   const hasIncompleteRule = rules.some((r) => !r.name || !r.rule);
@@ -214,9 +256,11 @@ const PatronBlockingRulesEditor = React.forwardRef<
             index={index}
             disabled={disabled}
             rowErrors={clientErrors[index] || {}}
+            serverRuleError={serverErrors[index]}
             error={error}
             onRemove={() => removeRule(index)}
             onUpdate={(field, value) => updateRule(index, field, value)}
+            onRuleBlur={() => handleRuleBlur(index)}
           />
         ))}
       </ul>

src/components/ServiceEditForm.tsx

@@ -17,6 +17,7 @@ import { FetchErrorData } from "@thepalaceproject/web-opds-client/lib/interfaces
 export interface ServiceEditFormProps<T> {
   data: T;
   item?: ServiceData;
+  additionalData?: any;
   disabled: boolean;
   save?: (data: FormData) => void;
   urlBase: string;
@@ -635,10 +636,7 @@ export default class ServiceEditForm<
    * Subclasses may override this method to control removal.
    * @param library The library to remove.
    */
-  isLibraryRemovalPermitted(library: LibraryWithSettingsData): boolean {
-    // library should be provided on every call.
-    // It is not used here, but might be in subclass implementations.
-    // Removal is permitted by default.
+  isLibraryRemovalPermitted(_library: LibraryWithSettingsData): boolean {
     return true;
   }
 

tests/jest/api/patronBlockingRules.test.ts

@@ -0,0 +1,78 @@
+import * as fetchMock from "fetch-mock-jest";
+import { validatePatronBlockingRuleExpression } from "../../../src/api/patronBlockingRules";
+import { PatronBlockingRule } from "../../../src/interfaces";
+
+const VALIDATE_URL = "/admin/patron_auth_service_validate_patron_blocking_rule";
+
+const sampleRule: PatronBlockingRule = {
+  name: "Fine Check",
+  rule: "{fines} > 10.0",
+};
+
+describe("validatePatronBlockingRuleExpression", () => {
+  afterEach(() => {
+    fetchMock.mockReset();
+  });
+
+  it("returns null on a 200 response", async () => {
+    fetchMock.post(VALIDATE_URL, { status: 200 });
+    const result = await validatePatronBlockingRuleExpression(
+      42,
+      sampleRule,
+      "test-token"
+    );
+    expect(result).toBeNull();
+  });
+
+  it("returns the detail string from a 400 response", async () => {
+    fetchMock.post(VALIDATE_URL, {
+      status: 400,
+      body: { detail: "Unknown placeholder: {unknown_field}" },
+    });
+    const result = await validatePatronBlockingRuleExpression(
+      42,
+      sampleRule,
+      "test-token"
+    );
+    expect(result).toBe("Unknown placeholder: {unknown_field}");
+  });
+
+  it("returns a fallback string when a 400 response body has no detail", async () => {
+    fetchMock.post(VALIDATE_URL, { status: 400, body: {} });
+    const result = await validatePatronBlockingRuleExpression(
+      42,
+      sampleRule,
+      "test-token"
+    );
+    expect(result).not.toBeNull();
+    expect(typeof result).toBe("string");
+  });
+
+  it("sends the correct URL, method, and CSRF header", async () => {
+    fetchMock.post(VALIDATE_URL, { status: 200 });
+    await validatePatronBlockingRuleExpression(42, sampleRule, "my-csrf-token");
+    expect(fetchMock).toHaveBeenCalledWith(
+      VALIDATE_URL,
+      expect.objectContaining({
+        method: "POST",
+        headers: expect.objectContaining({ "X-CSRF-Token": "my-csrf-token" }),
+      })
+    );
+  });
+
+  it("omits service_id from the form body when serviceId is undefined", async () => {
+    fetchMock.post(VALIDATE_URL, { status: 200 });
+    // Should not throw and should still make the request (server returns "save first" error)
+    const result = await validatePatronBlockingRuleExpression(
+      undefined,
+      sampleRule,
+      "tok"
+    );
+    expect(fetchMock).toHaveBeenCalledWith(
+      VALIDATE_URL,
+      expect.objectContaining({ method: "POST" })
+    );
+    // Server would return an error detail in a real call; here it returns 200 (mocked)
+    expect(result).toBeNull();
+  });
+});

tests/jest/components/PatronAuthServiceEditForm.test.tsx

@@ -1,13 +1,16 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import * as fetchMock from "fetch-mock-jest";
 import PatronAuthServiceEditForm from "../../../src/components/PatronAuthServiceEditForm";
 import {
   PatronAuthServicesData,
   PatronBlockingRule,
 } from "../../../src/interfaces";
 import { SIP2_PROTOCOL } from "../../../src/utils/patronBlockingRules";
 
+const VALIDATE_URL = "/admin/patron_auth_service_validate_patron_blocking_rule";
+
 async function expandLibrariesPanel(user: ReturnType<typeof userEvent.setup>) {
   const toggle = screen
     .getAllByRole("button")
@@ -63,6 +66,17 @@ function buildSIP2Item(rules: PatronBlockingRule[] = []) {
   };
 }
 
+// Guard: any blur on the Rule Expression textarea calls validatePatronBlockingRuleExpression.
+// All describe blocks get a default 200 mock so tests that incidentally trigger blur
+// don't fail with "only absolute URLs are supported" from the fetch polyfill.
+beforeEach(() => {
+  fetchMock.post(VALIDATE_URL, { status: 200 });
+});
+
+afterEach(() => {
+  fetchMock.mockReset();
+});
+
 describe("PatronAuthServiceEditForm – capability gating", () => {
   it("shows PatronBlockingRulesEditor in expanded library settings for SIP2", async () => {
     const user = userEvent.setup();