Improve Schema Refinement For Better Form Validation

Hey guys!

Let's dive into a cool feature request aimed at making form validation even smoother and more user-friendly. We're talking about enhancing how schema refinements work, specifically by associating them with individual fields in your form. This way, error messages pop up right next to the field that's causing trouble – a big win for usability!

The Challenge: Current Limitations in Schema Validation

Right now, when you're using schema validation libraries, you might face a bit of a challenge. Imagine you have a form with fields like username, password, and confirm_password. You want to make sure the passwords match, right? You'd typically use a refinement function to check this.

However, the current setup in some libraries can make it tricky to pinpoint exactly where the error occurred. The error message might just say "Password does not match," but it doesn't tell you which field is the culprit. This can be a little frustrating for the user because they have to figure out which password field needs fixing. This is why having the ability to directly associate refinement errors with specific fields becomes super important!

Let's look at an example. You might have a schema that looks like this (using a hypothetical library):

import * as S from 'sury'

const SSchema = S.schema({
  username: S.string,
  password: S.string,
  confirm_password: S.string,
}).with(S.refine, (value, s) => {
  if (value.password !== value.confirm_password) {
    s.fail('Password does not match')
  }
})
type SSchema = S.Output<typeof SSchema>

In this example, the S.refine function checks if the password and confirm_password fields match. If they don't, it throws an error. But the user doesn't immediately know which field is the issue. This is where the proposed enhancement comes in handy, allowing a more targeted and user-friendly experience.

The Solution: Field-Specific Refinements

The idea is to allow you to link the refinement directly to a specific field. This way, when an error happens, the error message is shown right next to that field. It's all about making the feedback loop as clear and intuitive as possible!

Think about it: instead of a generic error message, you'd get "Passwords do not match" right next to the confirm_password field. This immediate feedback helps users understand and fix errors super fast. It's a small change that makes a big difference in the user experience.

Other validation libraries, such as Zod and Valibot, have already implemented this feature. Let's check out how they do it:

import * as z from 'zod/mini'

const ZSchema = z.object({
  username: z.string(),
  password: z.string(),
  confirm_password: z.string(),
}).check(z.refine(data => data.password === data.confirm_password, {
  message: 'Password does not match',
  path: ['confirm_password'], // associate refinement with this field
}))
type ZSchema = z.output<typeof ZSchema>

In this example, the path: ['confirm_password'] part tells the library to associate the error with the confirm_password field. This is exactly the kind of feature we're aiming for!

Implementation: Modifying the S.fail Function

One way to achieve this would be to modify the S.fail function to accept an object with both a message and a path field. So, instead of just passing a string like 'Password does not match', you could pass an object like this:

s.fail({ message: 'Password does not match', path: ['confirm_password'] })

The path would specify the field the error is related to. This would allow the library to pinpoint the exact field with the error, displaying the message right where it's needed.

Benefits: Why This Matters

So, why should we care about this feature? Well, there are some really great advantages:

• Improved User Experience: Clear, immediate feedback is a game-changer. Users will instantly know which fields need attention, saving them time and frustration.
• Enhanced Debugging: If you're the one building and maintaining the form, pinpointing errors becomes way easier. You can quickly identify and fix issues. It is like having a helpful assistant.
• Increased Conversion Rates: Forms that are easy to understand and use lead to fewer abandoned submissions. A smooth validation process can significantly improve how many people successfully complete a form. This is because users are less likely to get frustrated and give up!
• Better Accessibility: For users with disabilities, clear and specific error messages are crucial. Field-specific errors help ensure everyone can use your forms effectively.

Conclusion: Making Form Validation More Intuitive

Adding the ability to associate schema refinements with specific fields will make form validation a lot more intuitive and user-friendly. By displaying error messages right where they need to be, you can significantly improve the user experience and reduce the likelihood of frustrating form-filling experiences.

In a nutshell, it's about making your forms smarter and more helpful, guiding users through the process with ease. We hope this feature request gets some love, and we can all start enjoying even better form validation in the future!

Thanks for reading, and let's keep making the web a better place, one form at a time!

For more details and examples, I recommend checking out the documentation of other schema validation libraries. For instance, the Zod documentation has a good explanation on how to implement it.

Zod Documentation