Formulaires avancés avec Alpine.js

Les textes de cet article ont été générés en partie par ChatGPT et DeepL Write et corrigés et révisés par nos soins.

Si vous n'êtes pas encore habitué à travailler sur des formulaires avec Alpine.js, vous pouvez rafraîchir vos connaissances dans notre premier article sur ce sujet, Formulaires interactifs avec Alpine.js.

Dans notre premier article sur les formulaires interactifs avec Alpine.js, nous avons déjà indiqué qu'Alpine.js peut également être utilisé pour influencer des éléments individuels en plus de l'affichage général des informations côté serveur dans le formulaire.

En raison de la demande générale, nous avons décidé d'aborder précisément ce sujet dans cet article de suivi et de montrer des exemples de la façon dont vous pouvez utiliser les informations et les états pour valider un formulaire avec Alpine.js.

Installation

Pour cette démonstration, nous utilisons notre Astro Boilerplate,
que nous avons déjà présenté en détail dans un article précédent.

Si notre modèle ne vous convient pas, ce n'est pas un problème. Les étapes de validation des entrées de formulaire fonctionnent dans n'importe quel projet avec Alpine.js.

Méthodes d'intégration pour Alpine.js

Afin de pouvoir accéder aux données et méthodes requises d'Alpine.js au cours de la mise en œuvre ultérieure, celles-ci sont d'abord déclarées afin d'éviter des erreurs dans la suite du processus.

formulaire.ts

form() contrôle l'état de chargement et enregistre la réponse envoyée par le serveur via la méthode submit(), qui est exécutée lorsque le formulaire est soumis.

Une fakeResponse() fictive est également incluse, qui "reçoit" des erreurs de validation exemplaires et simplifiées de notre backend fictif.

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;
  },
});

La réponse doit contenir un objet d'erreur dans lequel chaque paire clé-valeur est constituée du nom de l'élément d'entrée et de l'erreur de validation associée.

entrée.ts

input.ts gère l'affichage des erreurs de validation d'un élément d'entrée via la méthode validate(), qui est intégrée via l'attribut x-effect afin de recalculer les données à afficher lors de la soumission du formulaire.

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

Enfin, les méthodes déclarées pour Alpine.js sont importées pour cette étape et enregistrées dans l'EventListener alpin:init afin de pouvoir accéder aux scopes requis.

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();

Déclarer des méthodes utilitaires facultatives

Pour que nous puissions également utiliser des noms pour les éléments d'entrée comme étiquettes, nous créons la méthode capitalize, qui divise les chaînes écrites en casse kebab (par exemple : "adresse e-mail") et met chaque mot en majuscule.

Si vous décidez de ne pas utiliser de majuscules, les références correspondantes dans le composant input.astro doivent être supprimées

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;
  },
});

Création de pages et de composants dans Astro

Dans l'étape suivante, nous créons les pages et les composants dont nous avons besoin pour le formulaire. Nous définissons un composant et intégrez-le dans le bloc de formulaire.

entrée.astro

input.astro combine les éléments et <étiquette> dans un seul composant et contient également la représentation des erreurs de validation, qui sont cartographiées via l'entrée du contexte alpin.

---
importer { majuscule } depuis "@/scripts/utilities"

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

<div
 >



<h3>
  
  
  index.astro
</h3>

<p>index.astro représente notre bloc de formulaire et utilise le composant prédéfini <Input /> et complète sa logique avec le contexte du formulaire afin que les erreurs de l'objet de réponse puissent être affichées.</p>

<p>Alors que notre composant <Input /> gère l'affichage des erreurs de validation, nous lions l'attribut désactivé des éléments d'entrée individuels à l'état de chargement afin d'éviter les soumissions multiples du formulaire pendant le traitement.<br>
</p>

<pre class="brush:php;toolbar:false">---
importer la racine depuis "@/layouts/root.astro"
importer l'entrée depuis "@/components/input.astro"

const méta = {
  title : « Formulaires avancés avec Alpine.js »
}
---

<Racine {méta}>
  <principal>
    <formulaire
     >




<hr>

<h2>
  
  
  TL;DR
</h2>

<p>Avec Alpine.js, nous démontrons comment les erreurs de validation du backend sont affichées dynamiquement dans un formulaire et comment les éléments d'entrée réagissent aux événements correspondants dans le navigateur.</p>


          

            
  

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!