1.1.1 • Published 4 months ago

alpidate v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

alpidate

A lightweight validation plugin for Alpine.js inspired by Vuelidate.

npm

Alpidate on npm

Installation

You can install alpidate via npm:

npm install alpidate

Usage

Import and Register the Plugin

First, import Alpine.js and alpidate, then register the plugin:

import Alpine from 'alpinejs';
import alpidate from 'alpidate';

Alpine.plugin(alpidate);

Setting Up Validation in a Component

Define validation rules inside the validations property and initialize validation in init():

Alpine.data('app', () => ({
    init() {
        this.$validation(this);
    },
    validations: {
        'firstName': ['required', 'min:3'],
        'lastName': ['required', 'min:3'],
        'email': ['required', 'email'],
        'phone': ['required'],
        'form.firstName': ['required', 'min:3']
    }
}));

Supported Validation Rules

  • required - Ensures the field is not empty.
  • numeric - The field must contain only numbers.
  • email - Validates an email format.
  • regex - Allows custom validation rules using regular expressions.
  • min:value - Specifies the minimum length or value.
  • max:value - Specifies the maximum length or value.

This plugin also supports nested models, for example:

'from.firstName': ['required', 'min:3']

Accessing Validation State

Each model's validation state is stored in $v. The validation automatically updates when the model changes.

If you want to prevent error messages from displaying immediately, use $v.$touch. This remains false until you manually trigger validation using:

this.validate();

Displaying Validation Errors in Template

Use Alpine.js directives to show validation errors dynamically:

<span x-show="$v.firstName.invalid && $v.$touch">
    <small x-show="$v.firstName.required" class="text-red absolute sm:bottom-0 -bottom-12">
        First Name is Required
    </small>
    <small x-show="!$v.firstName.required && $v.firstName.min" class="text-red absolute sm:bottom-0 -bottom-12">
        Must be at least 3 characters
    </small>
</span>

Understanding the Validation State

  • Each model inside $v has an $invalid property indicating if all assigned validation rules pass.
  • $v.$touch helps control when validation messages appear (e.g., after form submission).

License

MIT License

1.1.1

4 months ago

1.1.0

4 months ago

1.0.9

4 months ago

1.0.10

4 months ago

1.0.8

6 months ago

1.0.7

6 months ago

1.0.6

6 months ago

1.0.5

6 months ago

1.0.4

6 months ago

1.0.3

6 months ago

1.0.2

6 months ago

1.0.1

6 months ago

1.0.0

6 months ago