Implementing Form Validation with VeeValidate in Vue.js

{
  "title": "Implementing Form Validation with VeeValidate in Vue.js",
  "description": "Guidelines for using VeeValidate to handle complex form validation in Vue applications, ensuring data integrity and user feedback.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-veevalidate-setup",
      "description": "Ensure VeeValidate is properly installed and configured in the Vue project.",
      "check": "Verify that VeeValidate is installed and imported in the main.js or main.ts file, and that ValidationObserver and ValidationProvider components are globally registered.",
      "fix": "Install VeeValidate using npm or yarn, import it in the main entry file, and register the necessary components globally.",
      "severity": "error"
    },
    {
      "id": "vue-veevalidate-usage",
      "description": "Ensure that all form inputs are wrapped with ValidationProvider components and the entire form is wrapped with a ValidationObserver component.",
      "check": "Verify that each form input is enclosed within a ValidationProvider and that the form is enclosed within a ValidationObserver.",
      "fix": "Wrap each input field with a ValidationProvider and the form with a ValidationObserver to enable validation.",
      "severity": "error"
    },
    {
      "id": "vue-veevalidate-rules",
      "description": "Ensure that appropriate validation rules are applied to each form input using the rules prop in ValidationProvider.",
      "check": "Verify that each ValidationProvider has a rules prop with the necessary validation rules specified.",
      "fix": "Add the required validation rules to the rules prop of each ValidationProvider.",
      "severity": "warning"
    },
    {
      "id": "vue-veevalidate-error-messages",
      "description": "Ensure that error messages are displayed for each form input when validation fails.",
      "check": "Verify that each ValidationProvider has a slot that displays error messages when validation fails.",
      "fix": "Add a slot to each ValidationProvider to display error messages, typically using the errors array provided by VeeValidate.",
      "severity": "warning"
    },
    {
      "id": "vue-veevalidate-custom-rules",
      "description": "Ensure that custom validation rules are defined and used appropriately when built-in rules are insufficient.",
      "check": "Verify that custom validation rules are defined using defineRule and applied to the relevant form inputs.",
      "fix": "Define custom validation rules using defineRule and apply them to the necessary form inputs via the rules prop.",
      "severity": "info"
    },
    {
      "id": "vue-veevalidate-async-validation",
      "description": "Ensure that asynchronous validation, such as checking for unique usernames, is implemented correctly.",
      "check": "Verify that asynchronous validation rules are defined and applied to the relevant form inputs.",
      "fix": "Define asynchronous validation rules using defineRule with async functions and apply them to the necessary form inputs.",
      "severity": "info"
    },
    {
      "id": "vue-veevalidate-localization",
      "description": "Ensure that validation error messages are localized to support multiple languages.",
      "check": "Verify that the localize function is used to set up localization for validation messages.",
      "fix": "Use the localize function to set up localization for validation messages, importing the necessary locale files.",
      "severity": "info"
    },
    {
      "id": "vue-veevalidate-accessibility",
      "description": "Ensure that form validation is accessible, providing clear error messages and appropriate ARIA attributes.",
      "check": "Verify that error messages are associated with their respective inputs and that ARIA attributes are used appropriately.",
      "fix": "Associate error messages with inputs using aria-describedby and ensure that ARIA attributes are used to enhance accessibility.",
      "severity": "warning"
    },
    {
      "id": "vue-veevalidate-performance",
      "description": "Ensure that form validation is optimized for performance, avoiding unnecessary re-renders and validations.",
      "check": "Verify that validation is triggered appropriately, such as on form submission or input blur, to avoid excessive validation checks.",
      "fix": "Configure validation triggers to occur on form submission or input blur to optimize performance.",
      "severity": "info"
    },
    {
      "id": "vue-veevalidate-testing",
      "description": "Ensure that form validation logic is tested to maintain reliability and prevent regressions.",
      "check": "Verify that unit tests are written for form validation logic, covering various validation scenarios.",
      "fix": "Write unit tests for form validation logic to cover different validation scenarios and ensure reliability.",
      "severity": "info"
    }
  ]
}