# kdu-validate

kdu-validate is a template-based validation framework for [Kdu.js](https://kdu-js.web.app/) that allows you to validate inputs and display errors.

Being template-based you only need to specify for each input what kind of validators should be used when the value changes. The errors will be automatically generated with 40+ locales supported.

This plugin is inspired by [PHP Framework Laravel's validation](https://laravel.com/).

### Features

- Template based validation that is both familiar and easy to setup.
- 🌍 i18n Support and error Messages in 40+ locales.
- 💫 Async and Custom Rules Support.
- 💪 Written in TypeScript.
- No dependencies.

### Installation

#### yarn

```bash
yarn add kdu-validate
```

#### npm

```bash
npm i kdu-validate --save
```

#### CDN

kdu-validate is also available on these CDNs:

- [jsdelivr](https://cdn.jsdelivr.net/npm/kdu-validate@latest/dist/kdu-validate.js) [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/kdu-validate/badge?style=rounded)](https://www.jsdelivr.com/package/npm/kdu-validate)
- [unpkg](https://unpkg.com/kdu-validate)

> When using a CDN via script tag, all the exported modules on KduValidate are available on the KduValidate Object. ex: KduValidate.Validator

### Getting Started

Install the rules you will use in your app, we will install the `required` rule for now:

```js
import { extend } from 'kdu-validate';
import { required, email } from 'kdu-validate/dist/rules';

// Add the required rule
extend('required', {
  ...required,
  message: 'This field is required'
});

// Add the email rule
extend('email', {
  ...email,
  message: 'This field must be a valid email'
});
```

Import the `ValidationProvider` component and register it:

#### Global Registration

```js
import { ValidationProvider } from 'kdu-validate';

// Register it globally
// main.js or any entry file.
Kdu.component('ValidationProvider', ValidationProvider);
```

#### Local Registration

```js
import { ValidationProvider } from 'kdu-validate';

export default {
  components: {
    ValidationProvider
  }
};
```

All the JavaScript work is done. Next in the template add the inputs you want to validate them:

```kdu
<ValidationProvider name="email" rules="required|email">
  <div slot-scope="{ errors }">
    <input k-model="email">
    <p>{{ errors[0] }}</p>
  </div>
</ValidationProvider>
```

The validation provider accepts two props: `rules` which is in its simplest form, a string containing the validation rules separated by a `|` character, and a `name` prop which is the field name that will be used in error messages.

and That's it, your input will be validated automatically, notice that the `ValidationProvider` uses [scoped slots](https://kdujs-v2.web.app/v2/guide/components-slots.html#Scoped-Slots) to pass down validation state and results.

There is more that can be done! You can customize events, validate initial values, manually validate or reset the field and much more.

### License

MIT