Support for Alpine prefix

[djmtype]

I have a 2 forms on the same page, so I need to use the prefix. Using Alpine with Astro BTW. Problem is when I submit the form, I get to errors logged to the console for my fields by this plugin. Is that normal?

Upon hitting the submit button with my fields empty, I get errors logged to the console like firstname required and email required. Yet my form is processed successfully, and shouldn't be.

Here's my code:

<div id='newsletter-form'>
    <form
        class='flow'
        id='subscribe-form'
        x2-data='newsletterForm()'
        x2-validate
        x2-on:submit='$validate.submit'
        x2-on:submit.prevent='submitForm'>
        <div class='form-control'>
            <label class='sr-only' for='firstname'>First Name</label>
            <input
                type='text'
                name='firstname'
                id='firstname'
                min='2'
                placeholder='First Name'
                style={`background-image: url(${input.src});`}
                required
            />
        </div>
        <div class='form-control'>
            <label class='sr-only' for='email'>Email Address</label>
            <input
                required
                type='email'
                name='email'
                id='email'
                placeholder='Email Address'
                style={`background-image: url(${input.src});`}
            />
        </div>

        <Button
            size='large'
            type='submit'
            text='Subscribe'
            x2-bind:disabled='loading'
        />

        <div x2-text='status'></div>
    </form>
</div>

```html
<div id='newsletter-form'>
    <form
        class='flow'
        id='subscribe-form'
        x2-data='newsletterForm()'
        x2-validate
        x2-on:submit='$validate.submit'
        x2-on:submit.prevent='submitForm'>
        <div class='form-control'>
            <label class='sr-only' for='firstname'>First Name</label>
            <input
                type='text'
                name='firstname'
                id='firstname'
                min='2'
                placeholder='First Name'
                style={`background-image: url(${input.src});`}
                required
            />
        </div>
        <div class='form-control'>
            <label class='sr-only' for='email'>Email Address</label>
            <input
                required
                type='email'
                name='email'
                id='email'
                placeholder='Email Address'
                style={`background-image: url(${input.src});`}
            />
        </div>

        <Button
            size='large'
            type='submit'
            text='Subscribe'
            x2-bind:disabled='loading'
        />

        <div x2-text='status'></div>
    </form>
</div>

  import Alpine from "alpinejs"
   import validate from "@colinaut/alpinejs-plugin-simple-validate"

   Alpine.plugin(validate);
   Alpine.prefix("x2-")

  Alpine.data("newsletterForm", () => ({
    buttonText: "Submit",
    loading: false,
    status: "",

    async submitForm(event: SubmitEvent) {
        event.preventDefault()

        const form = event.target as HTMLFormElement
        const formData = new FormData(form)
        const data = {
            firstname: formData.get("firstname"),
            email: formData.get("email"),
        }
        this.loading = true
        this.status = "Submitting..."

        try {
            const response = await fetch("/api/newsletter", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(data),
            })
            const result = await response.json()

            if (response.ok) {
                console.log(result)
                this.status = result.message || "Success"
                form.reset()

                setTimeout(() => {
                    this.status = ""
                }, 3000)
            } else {
                this.status = "Submission failed"
            }
        } catch (error) {
            console.error("Error occurred:", error)
            this.status = "An error occurred"
        } finally {
            this.loading = false
        }
    },
  }))

  Alpine.start()

[djmtype]

I added more validation on server-side so the form wouldn't be submitted with empty fields. But, was curious why errors were being logged to the browser upon submission. Most likely, it's a me-error.

[colinaut]

Definitely sounds like a bug. I'm kinda crazy busy with work at the moment but I'll mark this as a bug and try and review it soon.