Reprise : formulaire validé

Un formulaire à validation en direct, entièrement repris sans ré-exécuter le composant. Deux champs (signaux) alimentent un graphe de valeurs calculées (emailOk + passOk → formOk), qui pilote l'attribut disabled du bouton et les messages d'erreur conditionnels.

Astuce

Tapez un e-mail invalide ou un mot de passe court : les erreurs apparaissent et le bouton reste désactivé. Le composant ne s'exécute jamais sur le client — l'attribut disabled, les computed en cascade et la soumission reprennent depuis l'état du serveur.

Démo en direct

Signup.tsxTSX

"use resumable";
import { signal, computed } from "@bext-stack/framework/signals";

export default function Signup() {
  const email = signal("");
  const password = signal("");
  // computed-of-computed validity graph:
  const emailOk = computed(() => email.value.includes("@"));
  const passOk  = computed(() => password.value.length >= 8);
  const formOk  = computed(() => emailOk.value && passOk.value);
  return (
    <form onSubmit={(e) => { e.preventDefault(); /* … */ }}>
      <input onInput={(e) => { email.value = e.target.value; }} />
      {/* reactive disabled attr bound to a computed: */}
      <button disabled={!formOk.value}>Create account</button>
    </form>
  );
}