Tracking input change in alpine.js

I'm learning alpine.js and trying to capture the user input value. I have used "x-on:input" but its not calling the function

Below is the simple form input

 <input type="email" x-on:input.debounce="validateEmail($event)" x-model="userEmail" aria-describedby="emailHelp" placeholder="Enter email">

and this is the basic method in my index.js

function validateEmail(event){
console.log(userEmail);
}

The function is not getting called.

Adding a sample stackblitz

Please Guide

Thanks Shruti Nair

1 Answer

You're looking for x-on:change

<input type="email" x-on:change.debounce="validateEmail($event)" x-model="userEmail" aria-describedby="emailHelp" placeholder="Enter email">

You'll also want to make your function read the value from $event.target.value

Since you've already got an x-model, you could add $watch('userEmail', (val) => {}) to x-init and validate that way.

Edit: (based on the stackblitz)

• x-data is missing
• I've inlined all the logic from index.js
• forked stackblitz at

Full component:

<form x-data="{ userEmail: '', validateEmail(event) { console.log(event.target.value); }, submit($event) { console.log(this.userEmail) }
}"> <input type="email" x-on:change.debounce="validateEmail($event)" x-model="userEmail" aria-describedby="emailHelp" placeholder="Enter email"/> <button type="button" x-on:click="submit"> Submit </button>
</form>