feat(useForm): Set errors only for touched fields on 'blur' validation mode

[christianlmc]

🔗 Linked issue

#29

❓ Type of change

• [ ] 📖 Documentation (updates to the documentation or readme)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [x] 👌 Enhancement (improving an existing functionality like performance)
• [x] ✨ New feature (a non-breaking change that adds functionality)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

When a field gets blurred on 'blur' validation mode, it updates the error object with just the fields that have been touched. This solves the problem of having all fields showing errors when just the first one was blurred.

Resolves #29

📝 Checklist

• [x] I have read the Contributing Guidelines.
• [x] I have linked an issue or discussion.
• [x] I have updated the documentation accordingly.

[Mini-ghost]

I would like to express my appreciation for your contribution. Currently, the provided code is not performing as expected. I am wondering if you might have any insights or suggestions related to this issue?

<script setup lang="ts">
import { useForm } from '@vorms/core'

const { errors, register } = useForm({
  initialValues: {
    name: {
      first: 'John',
      last: 'Doe'
    },
  },
  validateMode: 'blur',
  validate() {
    return {
      name: {
        first: 'Please enter a first name',
        last: 'Please enter a last name'
      }
    }
  },
  onSubmit(values) {
    // Your submission logic here
  }
})

const { value: nameFirst, attrs: nameFirstAttrs } = register('name.first')
const { value: nameLast, attrs: nameLastAttrs } = register('name.last')
</script>

<template>
  <div>
    <pre>{{ errors }}</pre>
    <input v-model="nameFirst" type="text" v-bind="nameFirstAttrs">
    <input v-model="nameLast" type="text" v-bind="nameLastAttrs">
  </div>
</template>

Once we move focus away from the first input field (<input v-model="nameFirst" type="text">), its corresponding error message will be displayed:

{
  "name": {
    "first": "Please enter a first name",
    "last": "Please enter a last name"
  }
}

[christianlmc]

Thanks for the appreciation :smile: . Anyways, this is happening because my code does not support deep nested attributes (I didn't know vorms supported it). I'll update the PR when I have the time

[christianlmc]

@Mini-ghost PR Updated

[Heunsig]

Is this PR still in progress? I hope it gets merged soon so I can apply it to my form. And as always, thank you for your hard work.

[christianlmc]

Is this PR still in progress? I hope it gets merged soon so I can apply it to my form. And as always, thank you for your hard work.

It is ready to merge, we just need the package author to approve (or request changes)

[Mini-ghost]

I sincerely apologize for the extended delay in addressing this issue.

Upon reevaluation, I have reconsidered the problem at hand. It occurred to me that there might be a potential solution wherein any validation mode could offer the choice to display either the complete set of error messages or solely those associated with 'dirty' fields.

The current proposed approach involves introducing the concept of errorDisplay: 'all' | 'dirty' | 'touched', with 'all' set as the default display mode. I plan to commence work on this concept shortly, as part of the ongoing Pull Request (PR). Should you have any suggestions or feedback, I would greatly appreciate your input.

Thank you for your understanding and patience regarding this matter.

[christianlmc]

Sounds good, I like the new approach and I'm excited to see how it turns out, thanks