Why choose @tidy?

Crafting robust forms with clear and maintainable validation is vital for any SPA application. Existing libraries might leave you with cluttered templates, complex rule configurations, and scattered error handling. it does have some potential drawbacks in terms of code readability, maintainability, and usability:

But there's a better way! With @tidy validation package tackles these challenges head-on, offering a streamlined and developer-friendly solution built with comprehensive type safety.

Core Principles:

• Declarative and Composable: Define validation rules declaratively within components, promoting code reuse and separation of concerns.
• Improved Readability: Emphasize clear and concise syntax for validation rules, enhancing maintainability.
• Centralized Error Handling: Provide a unified mechanism for managing and displaying validation errors, improving usability.
• Full-fledged Type Safety (Any SPA with Typescript): Leverage type information for validation rules. This enhances developer experience, reduces errors, and provides an extra layer of confidence in your code.
• Internationalization: Support for different languages for validation messages.
• Asynchronous Validation: Allow for asynchronous validation rules that interact with servers for backend validation.

Basic Example

This example demonstrates how @tidy simplifies form validation in Vue.js. We'll create a basic form with a single name input field and ensure it's required using @tidy's declarative validation approach..

<script setup lang="ts">
  import { reactive } from 'vue'
  import { useForm, Validators } from "@nattyjs/tidy"
  
  const form = reactive(
        useForm({ name: '' }, {
          validators: {
            name: Validators.required()
          }
      })
    )
  
</script>

<template>
<div>
  <input v-model="form.name" />
  <span v-if="form.errors?.name">This field is required</span>
</div>
</template>

Play online

You can start playing with this template in your browser using our online sandboxes: