How to use safeParse to produce a message

[jdgamble555]

I'm trying to see how to produce a message:

const result = safeParse(draftSchema, formData);

if (!result.success) {
    error(405, flatten(result.error));
}

flatten does not seem to take any result.error (I'm aware its depreciated) or result.issues etc.

Obviously result.issues[0].message will produce a simple message, but I need to know where it is coming from etc.

Also, there doesn't even seem to be a way with issues to get the name of the form value the error is thrown on?

J

[fabian-hiller]

Have you read this guide? https://valibot.dev/guides/issues/

[fabian-hiller]

For forms I recommend using flatten. You can pass result.issues as the first argument. Each field with an error will then be listed under the nested key. If you are using FormData, you might also want to have a look at my other library decode-formdata: https://github.com/fabian-hiller/decode-formdata

[fabian-hiller]

If you want to format result.issues yourself, the path property of an issue contains the name of the field.

[jdgamble555]

I ended up having to do this, which is a mess. Hopefully this could be simplified for safeParse:

const result = safeParse(draftSchema, formData);
if (!result.success) {
    if (Array.isArray(result.issues[0].path)) {
        const msg = result.issues[0].path[0].key + ' - ' + result.issues[0].path[0].value + ' - '
            + result.issues[0].message;
        console.error(msg);
        error(405, msg);
    }
    error(405, result.issues[0].message);
}

[fabian-hiller]

It seems to me that you want to customize the error messages Valibot outputs. There are several ways to do this.

Please upgrade to Valibot >= v0.28.0 and notice that we changed the names of some types and the default error messages.

Option 1: Do it afterwards by formatting the issues by hand

import * as v from 'valibot';

// Parse the input
const result = v.safeParse(Schema, formData, {
  abortEarly: true, // Since you only use the first issue
});

// Process the result
if (result.issues) {
  const firstIssue = result.issues[0];
  if (firstIssue.path) {
    const pathItem = firstIssue.path[0];
    error(405, `${pathItem.key} - ${pathItem.value} - ${firstIssue.message}`);
  } else {
    error(405, firstIssue.message);
  }
}

Note that you can also write your own function to which you pass the parse result or issues to avoid writing the same code twice:

import * as v from 'valibot';

// Create error function
function formError(issues: v.SchemaIssue) {
  const firstIssue = issues[0];
  if (firstIssue.path) {
    const pathItem = firstIssue.path[0];
    error(405, `${pathItem.key} - ${pathItem.value} - ${firstIssue.message}`);
  } else {
    error(405, firstIssue.message);
  }
}

// Parse the input
const result = v.safeParse(Schema, formData, {
  abortEarly: true, // Since you only use the first issue
});

// Process the result
if (result.issues) {
  formError(result.issues);
}

Option 2: Change formatting of error messages globally

import * as v from 'valibot';

// Overwrite default messages
v.setGlobalMessage((issue) => {
  if (issue.path) {
    const pathItem = issue.path[0];
    return `${pathItem.key} - ${pathItem.value} - ${issue.message}`;
  }
  return issue.message;
});

// Parse the input
const result = v.safeParse(Schema, formData, {
  abortEarly: true, // Since you only use the first issue
});

// Process the result
if (result.issues) {
  error(405, result.issues[0].message);
}

Option 3: Change formatting of error messages locally

import * as v from 'valibot';

// Parse the input
const result = v.safeParse(Schema, formData, {
  abortEarly: true, // Since you only use the first issue
  // Overwrite default messages
  message: (issue) => {
    if (issue.path) {
      const pathItem = issue.path[0];
      return `${pathItem.key} - ${pathItem.value} - ${issue.message}`;
    }
    return issue.message;
  }
});

// Process the result
if (result.issues) {
  error(405, result.issues[0].message);
}

[jdgamble555]

Thanks! I ended up using option 1 but with a guard clause for simplicity:

if (!result.success) {
    const firstIssue = result.issues[0];
    if (!firstIssue.path) {
        error(405, firstIssue.message);
    }
    const pathItem = firstIssue.path[0];
    error(405, `${pathItem.key} - ${pathItem.value} - ${firstIssue.message}`);
}