<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" : "";
}
};
};
})();
This Pen doesn't use any external CSS resources.