Lettre d'information


<div id="app">
  <form novalidate @submit.prevent="envoyer">
    <p><label>Courriel <input v-model.trim="courriel" type="email" autocomplete="email"></label></p>
    <fieldset>
      <legend>Rayons qui vous intéressent</legend>
      <label v-for="r in rayons" :key="r"><input v-model="choix" type="checkbox" :value="r"> {{ r }}</label>
    </fieldset>
    <p><label><input v-model="accord" type="checkbox"> J'accepte de recevoir la lettre</label></p>
    <button type="submit" :disabled="!valide">S'inscrire</button>
    <p role="status">{{ message }}</p>
  </form>
</div>


const { createApp, ref, computed } = Vue;

createApp({
  setup() {
    const rayons = ["Informatique", "Mathématiques", "Physique", "Littérature"];
    const courriel = ref("");
    const choix = ref([]);
    const accord = ref(false);
    const message = ref("");

    const valide = computed(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(courriel.value)
      && choix.value.length > 0 && accord.value);

    function envoyer() {
      message.value = `${courriel.value} recevra les nouveautés : ${choix.value.join(", ")}.`;
    }
    return { rayons, courriel, choix, accord, message, valide, envoyer };
  },
}).mount("#app");

L'état du bouton au chargement, après le courriel et deux rayons, puis après l'accord ; enfin, le message après l'envoi :


bouton désactivé : true
bouton désactivé : true
bouton désactivé : false
awa@campus.fr recevra les nouveautés : Informatique, Physique.

Un bouton désactivé est acceptable quand ce qui manque est évident et visible à côté de lui, comme une case d'accord. Pour un formulaire plus long, on laisse cliquer et l'on explique chaque erreur.

Énoncé

Corrigé