<form id="myForm"
  x-data="createFormComponent()" 
  @submit.prevent="onSubmit">

  <input id="email" type="text" name="email" 
    x-model="email" />
    
  <span
    class="error"
    style="display: none"
    x-show="error"
    x-text="error"
  ></span>

  <button type="submit">Submit</button>
</form>
(function () {
  "use strict";

  window.createFormComponent = function () {
    return {
      email: "",
      error: "",

      onSubmit($event) {
        this.error = !this.email ? "You must enter an email address" : "";
      }
    };
  };
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js