Many forms require basic validation, and using native form validation can be sufficient. However, customizing the appearance of these forms can be challenging.
The AlpineJS "validity" directive offers a solution to this issue by allowing you to display error messages in a clear and concise manner. This directive utilizes the native API to provide seamless integration with your existing form elements, making it an efficient and straightforward solution for client-side form validation.
Include the following <script>
tag in the <head>
of your document, just before Alpine.
<script
src="https://cdn.jsdelivr.net/npm/@jlopinto/alpine-validity@0.x.x/dist/alpine-validity.min.js"
defer
></script>
npm install @jlopinto/alpine-validity
Add the x-validity
directive to your project by registering the plugin with Alpine.
import Alpine from "alpinejs"
import { Validity } from "@jlopinto/alpine-validity"
Alpine.plugin(Validity)
window.Alpine = Alpine
window.Alpine.start()
<form x-data x-validity>
<div x-data="{error: ''}" @validation="error = $event.detail.error">
<input type="email" required />
<div x-text="error"></div>
</div>
<button>Submit</button>
</form>
<script>
const customMessages = {
valueMissing: "You forgot to enter your email address!",
typeMismatch: "This appears to be an invalid email address."
}
</script>
<form x-data x-validity x-validity:messages="customMessages">
<div x-data="{error: ''}" @validation="error = $event.detail.error">
<input type="email" required />
<div x-text="error"></div>
</div>
<button>Submit</button>
</form>
<script>
const customFormMessages = {
valueMissing: "This field is mandatory",
typeMismatch: "Please enter an email."
}
const customInputMessages = {
valueMissing: "You forgot to enter your email address!",
typeMismatch: "This appears to be an invalid email address."
}
</script>
<form x-data x-validity x-validity:messages="customFormMessages">
<div x-data="{error: ''}" @validation="error = $event.detail.error">
<input type="email" required x-validity:messages="customInputMessages" />
<div x-text="error"></div>
</div>
<button>Submit</button>
</form>
<script>
const morethan5 = (value) => value.length > 5
</script>
<form x-data x-validity>
<div x-data="{error: ''}" @validation="error = $event.detail.error">
<input
type="email"
required
x-validity:controls="morethan5"
x-validity:messages="{morethan5: 'Provide a value longer than 5 character'}"
/>
<div x-text="error"></div>
</div>
<button>Submit</button>
</form>
x-validity
provide two modifiers.
Modifier | Description | Usage |
---|---|---|
x-validity:messages="[]" |
Change the native message error | x-validity:messages="{'<error_name>': '<error text>', ...}" |
x-validity:controls"{}" |
Add custom controls | x-form:controls="[<custom control function>, ...]" |
This projects follow the Semantic Versioning guidelines.
Copyright (c) 2023 Julien Lopinto and contributors
Licensed under the MIT license, see LICENSE.md for details.