Erweiterte Formulare mit Alpine.js

Die Texte in diesem Artikel wurden in Teilen von ChatGPT und DeepL Write generiert und von uns korrigiert und überarbeitet.

Wenn Sie noch nicht mit der Arbeit an Formularen mit Alpine.js vertraut sind, können Sie Ihr Wissen in unserem ersten Artikel zu diesem Thema, Interaktive Formulare mit Alpine.js, auffrischen.

In unserem ersten Artikel zu interaktiven Formularen mit Alpine.js haben wir bereits darauf hingewiesen, dass mit Alpine.js neben der allgemeinen Darstellung serverseitiger Informationen im Formular auch Einfluss auf einzelne Elemente genommen werden kann.

Aufgrund der großen Nachfrage haben wir uns entschieden, genau dieses Thema in diesem Folgeartikel aufzugreifen und Beispiele zu zeigen, wie Sie Informationen und Zustände zur Validierung eines Formulars mit Alpine.js nutzen können.

Aufstellen

Für diese Demonstration verwenden wir unsere Astro Boilerplate,
die wir bereits in einem früheren Artikel ausführlich vorgestellt haben.

Wenn unser Standardpaket nicht das Richtige für Sie ist, ist das kein Problem. Die Schritte zum Validieren von Formulareinträgen funktionieren in jedem Projekt mit Alpine.js.

Integrationsmethoden für Alpine.js

Um im weiteren Verlauf der Implementierung auf die benötigten Daten und Methoden von Alpine.js zugreifen zu können, werden diese zunächst deklariert, um Fehler im weiteren Verlauf zu vermeiden.

form.ts

form() steuert den Ladezustand und speichert die vom Server über die Methode subscribe() gesendete Antwort, die beim Absenden des Formulars ausgeführt wird.

Eine fiktive fakeResponse() ist ebenfalls enthalten, die beispielhafte und vereinfachte Validierungsfehler von unserem fiktiven Backend „empfängt“.

import { sleep } from "../utilities";

export const form = () => ({
  loading: false,
  response: null as unknown,

  async submit(event: SubmitEvent) {
    this.loading = true;
    this.response = null;
    const formData = new FormData(event.target as HTMLFormElement);

    /**
     * Replace the following fake response with your `fetch` request and
     * receive the validated results from the server side as JSON.
     *
     * Make sure you add the necessary attributes to the `<Input />'
     * elements to perform client-side validation as well.
     */

    const fakeResponse = async () => {
      await sleep(1000); // Mock response time

      return {
        errors: {
          // [input.name]: "message string"
          username: "Username is alrady taken",
          password: "Password is too short",
        },
      };
    };

    this.response = await fakeResponse();
    this.loading = false;
  },
});

Die Antwort muss ein Fehlerobjekt enthalten, in dem jedes Schlüssel-Wert-Paar aus dem Namen des Eingabeelements und dem zugehörigen Validierungsfehler besteht.

input.ts

input.ts übernimmt die Anzeige von Validierungsfehlern für ein Eingabeelement über die Methode „validate()“, die über das Attribut x-effect eingebunden ist, um die Daten für die Anzeige beim Absenden des Formulars neu zu berechnen.

export const input = () => ({
  error: null as unknown,

  validate() {
    if (!this.response?.errors?.[this.$el.name]) return (this.error = null);
    this.error = this.response.errors[this.$el.name];
  },
});

globals.ts

Abschließend werden für diesen Schritt die für Alpine.js deklarierten Methoden importiert und im EventListener alpine:init registriert, um auf die benötigten Scopes zugreifen zu können.

import Alpine from "alpinejs";
import { app } from "./alpine/app";
import { form } from "./alpine/form";
import { input } from "./alpine/input";

// Await Alpine.js initialization
document.addEventListener("alpine:init", () => {
  Alpine.data("app", app);
  Alpine.data("form", form);
  Alpine.data("input", input);
});

Alpine.start();

Deklarieren optionaler Dienstprogrammmethoden

Damit wir auch Namen für Eingabeelemente als Beschriftungen verwenden können, erstellen wir die Methode „capitalize“, die in Kebab-Groß-/Kleinschreibung geschriebene Zeichenfolgen (z. B.: „email-address“) aufteilt und jedes Wort groß schreibt.

Wenn Sie sich gegen die Großschreibung entscheiden, müssen die entsprechenden Referenzen in der Komponente input.astro entfernt werden

import { sleep } from "../utilities";

export const form = () => ({
  loading: false,
  response: null as unknown,

  async submit(event: SubmitEvent) {
    this.loading = true;
    this.response = null;
    const formData = new FormData(event.target as HTMLFormElement);

    /**
     * Replace the following fake response with your `fetch` request and
     * receive the validated results from the server side as JSON.
     *
     * Make sure you add the necessary attributes to the `<Input />'
     * elements to perform client-side validation as well.
     */

    const fakeResponse = async () => {
      await sleep(1000); // Mock response time

      return {
        errors: {
          // [input.name]: "message string"
          username: "Username is alrady taken",
          password: "Password is too short",
        },
      };
    };

    this.response = await fakeResponse();
    this.loading = false;
  },
});

Erstellen von Seiten und Komponenten in Astro

Im folgenden Schritt erstellen wir die Seiten und Komponenten, die wir für das Formular benötigen. Wir definieren ein Komponente erstellen und in den Formularblock integrieren.

Eingang.astro

input.astro kombiniert die Elemente und in einer Komponente und enthält auch die Darstellung der Validierungsfehler, die über die Alpine-Kontexteingabe abgebildet werden.

---
{Großschreibung} aus „@/scripts/utilities“ importieren

const { name, ...props } = Astro.props
---

<div
 >



<h3>
  
  
  index.astro
</h3>

<p>index.astro stellt unseren Formularblock dar und verwendet die vordefinierte Komponente <Input /> und ergänzt seine Logik mit dem Formularkontext, sodass Fehler aus dem Antwortobjekt angezeigt werden können.</p>

<p>Während unsere Komponente <Input /> kümmert sich um die Anzeige von Validierungsfehlern, wir binden das Attribut „disabled“ der einzelnen Eingabeelemente an den Ladezustand, um ein mehrfaches Absenden des Formulars während der Verarbeitung zu verhindern.<br>
</p>

<pre class="brush:php;toolbar:false">---
Root aus „@/layouts/root.astro“ importieren
Eingabe aus „@/components/input.astro“ importieren

const meta = {
  Titel: „Erweiterte Formulare mit Alpine.js“
}
---

<Root {meta}>
  <Haupt>
    <form
     >




<hr>

<h2>
  
  
  TL;DR
</h2>

<p>Mit Alpine.js demonstrieren wir, wie Validierungsfehler aus dem Backend dynamisch in einem Formular angezeigt werden und wie Eingabeelemente auf entsprechende Ereignisse im Browser reagieren.</p>


          

            
  

            
        

Das obige ist der detaillierte Inhalt vonErweiterte Formulare mit Alpine.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!