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.