T
TanStack•9mo ago
inland-turquoise

Accessing Valibot schema params?

I have a schema: 
import * as v from 'valibot';

export const LoginSchema = v.object({
  emailAddress: v.pipe(
    v.string(),
    v.email(),
    v.nonEmpty('Email address is required'),
    v.minLength(3, 'Must be a length of at least 3'),
    v.maxLength(30, 'Email is too long')
  ),
  password: v.pipe(
    v.string(),
    v.nonEmpty('Password is required'),
    v.email(),
    v.minLength(6, 'Must be a length of at least 6'),
    v.maxLength(12, 'Password is too long'),
    v.regex(/[A-Z]/, 'Must contain at least one capital letter'),
    v.regex(
      /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,
      'Password must contain at least one special character'
    )
  ),
});
import * as v from 'valibot';

export const LoginSchema = v.object({
  emailAddress: v.pipe(
    v.string(),
    v.email(),
    v.nonEmpty('Email address is required'),
    v.minLength(3, 'Must be a length of at least 3'),
    v.maxLength(30, 'Email is too long')
  ),
  password: v.pipe(
    v.string(),
    v.nonEmpty('Password is required'),
    v.email(),
    v.minLength(6, 'Must be a length of at least 6'),
    v.maxLength(12, 'Password is too long'),
    v.regex(/[A-Z]/, 'Must contain at least one capital letter'),
    v.regex(
      /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,
      'Password must contain at least one special character'
    )
  ),
});
Now want to do something like this: 
<form.Field
  name="emailAddress"
  validators={{
    onChange: LoginSchema.email,
  }}
>
<form.Field
  name="emailAddress"
  validators={{
    onChange: LoginSchema.email,
  }}
>
Is it possible?
3 Replies
inland-turquoise
inland-turquoiseOP•9mo ago
I know I can do the following instead: 
export const LoginEmailAddressSchema = v.pipe(
  v.string(),
  v.email(),
  v.nonEmpty('Email address is required'),
  v.minLength(3, 'Must be a length of at least 3'),
  v.maxLength(30, 'Email is too long')
);

export const LoginPasswordSchema = v.pipe(
  v.string(),
  v.nonEmpty('Password is required'),
  v.email(),
  v.minLength(6, 'Must be a length of at least 6'),
  v.maxLength(12, 'Password is too long'),
  v.regex(/[A-Z]/, 'Must contain at least one capital letter'),
  v.regex(
    /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,
    'Password must contain at least one special character'
  )
);
export const LoginEmailAddressSchema = v.pipe(
  v.string(),
  v.email(),
  v.nonEmpty('Email address is required'),
  v.minLength(3, 'Must be a length of at least 3'),
  v.maxLength(30, 'Email is too long')
);

export const LoginPasswordSchema = v.pipe(
  v.string(),
  v.nonEmpty('Password is required'),
  v.email(),
  v.minLength(6, 'Must be a length of at least 6'),
  v.maxLength(12, 'Password is too long'),
  v.regex(/[A-Z]/, 'Must contain at least one capital letter'),
  v.regex(
    /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,
    'Password must contain at least one special character'
  )
);
<form.Field
  name="emailAddress"
  validators={{
    onChange: LoginEmailAddressSchema,
  }}
>
<form.Field
  name="password"
  validators={{
    onChange: LoginPasswordSchema,
  }}
>
<form.Field
  name="emailAddress"
  validators={{
    onChange: LoginEmailAddressSchema,
  }}
>
<form.Field
  name="password"
  validators={{
    onChange: LoginPasswordSchema,
  }}
>
But having it in 1 object instead of 2 exports is much nicer...
equal-aqua
equal-aqua•9mo ago
In Zod it should be LoginSchema.shape.emailAddress - so with Valibot you may try LoginSchema.entries.emailAddress
inland-turquoise
inland-turquoiseOP•9mo ago
Thanks for taking the time to answer. That was it. So much nicer!

Did you find this page helpful?