This page guides you through creating a basic form with a name input field and enforcing the "required" validation rule using @tidy.

Prerequisites:

• A basic understanding of Vue.js or Svelte components and templates.
• @tidy installed in your Vue.js or Svelte project (refer to the installation guide if needed).

Basic Example of Form Validation

Now that you've installed, let's dive into a basic example showcasing its functionalities. Here, we'll create a simple form with a name input field and ensure it's required using validation rules.

1. Global Error Message Configuration (Optional):

While not always necessary, @tidy allows you to configure global error messages for specific validators. This code snippet demonstrates setting a global error message for the required validator:

import { configure } from "@nattyjs/tidy"; 

configure({
  errorMessage: {
    validator: {
      required: 'This field is required.',
    },
  },
});

This approach defines a default message for the required validator, which can be overridden by setting custom messages for specific fields if needed. However, if you prefer to define error messages directly within your components, you can skip this step.

2. Creating the Form with Validation:

Here's the core functionality of the form with validation:

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

1. We import useForm and Validators from @nattyjs/tidy.
2. We use useForm to create a reactive form object named form with an initial state (name set to an empty string).
3. We define validation rules within the validators object. Here, Validators.required() ensures the user enters a value for the name field.

3. The Template:

<template>
<div>
  <input v-model="form.name" />
  <span>{{form.errorMessage.name}}</span>
</div>
</template>

Play online

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