Fix: Add attribute to persist server validation messages

Author: SanderSander

README.md

@@ -72,12 +72,17 @@ Add text content to the `<validation-output>` element to display server-side val
 ```html
 <input type="email" id="email" value="known@email" />
 <validation-output for="email">
-    Email <b>known@email</b> already registered
+    Invalid credentials. Please try again.
+</validation-output>
+
+<input type="text" id="persistent" value="rejected-value" />
+<validation-output for="persistent" persistent>
+    This error will be show again if the value is changed back to the rejected value
 </validation-output>
 ```
 
 When the user modifies the input field, the server-side message is hidden.
-If the user changes the value back to the original, the message will be shown again.
+If the `persistent` attribute is set and the user changes the value back to the rejected value, the message will be shown again.
 
 **Note:** When displaying server-side validation errors, the input element won't have the `:user-invalid` pseudo-class applied. 
 To style server-validated inputs, you can use the `data-server-invalid="true"` attribute selector instead. 
@@ -108,7 +113,8 @@ validation-output:state(has-error) {
 
 ### Attributes
 
-| Attribute  | Required | Description                                              |
-|------------|----------|----------------------------------------------------------|
-| `for`      | Yes      | ID of the input element to validate                      |
-| `template` | No       | ID of the template containing custom validation messages |
+| Attribute    | Required | Description                                                                       |
+|--------------|----------|-----------------------------------------------------------------------------------|
+| `for`        | Yes      | ID of the input element to validate                                               |
+| `template`   | No       | ID of the template containing custom validation messages                          |
+| `persistent` | No       | Show the server validation error again if the value reverts to the rejected value |

demo.html

@@ -57,7 +57,9 @@
             <label for="decline" class="label mt-8">Server declined the text "decline"</label>
             <div class="relative">
                 <input type="text" id="decline" class="input" value="decline" aria-describedby="decline-validation-error" placeholder="Enter everything except 'decline'">
-                <validation-output for="decline" class="validation-output" id="decline-validation-error">The word <b>"decline"</b> was declined on the server.</validation-output>
+                <validation-output for="decline" class="validation-output" id="decline-validation-error" persistent>
+                    The word <b>"decline"</b> was declined on the server.
+                </validation-output>
             </div>
 
             <!-- Custom validation message -->

validation-output.ts

@@ -43,7 +43,12 @@ class ValidationOutput extends HTMLElement {
 
         this.#serverError = this.innerHTML;
         this.#serverErrorValue = this.#for.value;
-        this.#for.setCustomValidity(this.#serverError);
+
+        // We only set the custom validity if the element is persistent.
+        // If we set this while not persistent, the client will not be able to submit the form
+        if (this.hasAttribute("persistent")) {
+            this.#for.setCustomValidity(this.#serverError);
+        }
 
         // If the element is added to the DOM, we need to wait until the element is rendered.
         // Otherwise, transitions/animations will not work correctly.
@@ -131,7 +136,11 @@ class ValidationOutput extends HTMLElement {
         }
 
         // Check if the user reverted to the original server-rejected value
-        if (this.#serverError && this.#for.value === this.#serverErrorValue) {
+        if (
+            this.#serverError &&
+            this.#for.value === this.#serverErrorValue &&
+            this.hasAttribute("persistent")
+        ) {
             this.#for.setCustomValidity(this.#serverError);
             this.#setErrorMessage(this.#serverError);
             return;