@juno0424/hapi

HAPI Form Plugin

Wrapper of Alpine JS plugin for HAPI Form, works on Laravel API endpoint.

CDN

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/@juno0424/hapi@latest/dist/hapi.min.js"></script>

Usage

<script>
Hapi.form({
    name: "",
    endpoint: "",
    redirectTo: "",
    fileUpload: {
        filepond: filepondObject,
        el: '#files'
    },
    onSuccess(res) {},
    onFailed(err) {}
});
</script>

• name – The name of the instance, to be matched with x-data="name".
• endpoint – The form endpoint URL generated from the backend.
• redirectTo – Location to be redirected after success. Eg: "/thank-you" or "https://example.com". (Optional)
• fileUpload
  • filepond – Filepond object. (Filepond plugin required)
  • el – Select input element if you're using normal upload.
• onSuccess() – On success event.
• onFailed() – On failed event.

Array data

Hapi.form({
    fields: {
      colors; [] // Example an empty array of colors
    },
    name: "",
    endpoint: "",
});

Alpine.js data

Sometimes you might need to set data for Alpine.js, I got your back.

Hapi.form({
    ...
    open: false,
});

Events

Success Event

When submission is success, Hapi will emit hapi:success event.

Error Event

When submission has error, Hapi will emit hapi:error event.