# @jlopinto/alpine-validity
> Client-Side Form Validation with ease
Latest version **0.1.1** (published 2023-03-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install @jlopinto/alpine-validity
pnpm add @jlopinto/alpine-validity
yarn add @jlopinto/alpine-validity
bun add @jlopinto/alpine-validity
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-03-17 |
| First published | 2023-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Julien Lopinto |
| Maintainers | jlopinto |
## Links
- npm: https://www.npmjs.com/package/@jlopinto/alpine-validity
- Repository: https://github.com/jlopinto/alpine-validity
- Homepage: https://github.com/jlopinto/alpine-validity#readme
- Issues: https://github.com/jlopinto/alpine-validity/issues
- npm.io page: https://npm.io/package/@jlopinto/alpine-validity
## Recent versions
- 0.1.1 (latest) — 2023-03-17
- 0.1.0 — 2023-03-17
## README
# Alpine Validity
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.
## Installation
### CDN
Include the following `
```
### NPM
```bash
npm install @jlopinto/alpine-validity
```
Add the `x-validity` directive to your project by registering the plugin with Alpine.
```js
import Alpine from "alpinejs"
import { Validity } from "@jlopinto/alpine-validity"
Alpine.plugin(Validity)
window.Alpine = Alpine
window.Alpine.start()
```
## Usage
### Display native validation messages
```html
```
[Codepen demo](https://codepen.io/blo4r/pen/PoBreGG)
### Customize native validation messages
```html
```
[Codepen demo](https://codepen.io/blo4r/pen/gOjNzgw)
### Override custom validation messages
```html
```
[Codepen demo](https://codepen.io/blo4r/pen/gOjNzgw)
### Add custom controls and messsages
```html
```
[Codepen demo](https://codepen.io/blo4r/pen/yLqdjgj)
### Modifiers
`x-validity` provide two modifiers.
| Modifier | Description | Usage |
| -------------------------- | ------------------------------- | ------------------------------------------------------------- |
| `x-validity:messages="[]"` | Change the native message error | `x-validity:messages="{'': '', ...}"` |
| `x-validity:controls"{}"` | Add custom controls | `x-form:controls="[, ...]"` |
| |
## Versioning
This projects follow the [Semantic Versioning](https://semver.org/) guidelines.
## License
Copyright (c) 2023 Julien Lopinto and contributors
Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.
---
_Source: https://npm.io/package/@jlopinto/alpine-validity · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._