Ok, so I've got my own custom create user form stood up. If I do a direct post, it works as expected however I want to add some additional information that the user doesn't have control over setting. In this case, we'll use roles as an example. I'm leveraging the collection endpoints and then making the fetch to the api/users via a post form submission but am getting the following error:

ERROR (payload): ValidationError: followingFieldsInvalid firstName, lastName

Here is the users' endpoint config:

endpoints: [
    {
      path: '/createAccount',
      method: 'post',
      handler: async (req, res, next) => {
        req.body.roles = ['customer']

        const fullURL = req.protocol + "://" + req.hostname + ":9000";

        console.log(req.body)

        fetch(

${fullURL}/api/users

, {
          'method':'post',
          'body': req.body
          }
        )
      }
    }
  ]

And here is the form itself:

<Form method="post" validationOperation='create' redirect={

${serverURL}/admin

} action={

${serverURL}${api}/users/createAccount

} onSuccess={onSuccess}>
            <Email label="Email Address" name="email" required defaultValue="test@email.com"></Email>
            <Password label="Password" name="password" required></Password>
            <ConfirmPassword label="Confirm Password" name="confirmPassword"></ConfirmPassword>
            <Text label="First Name" name="firstName" required></Text>
            <Text label="Last Name" name="lastName" required></Text>
            <FormSubmit>Create</FormSubmit>
        </Form>

So I've discovered that hooks may make more sense; as such I've moved to using that to massage that data in the beforeChange hook. But now it's throwing a validation issue on email. It is not failing client side validation.

hooks: 
    {
      beforeChange: [async (data) => {
        data.data.roles = ['customer']
        console.log(data.data)
        return data;
      }]
    }

And... it has for some reason gone away. I did notice that if I return the data I get an error of

ERROR (payload): RangeError: Maximum call stack size exceeded

but just returning the method results in the data being updated and deployed to Mongo anyways. Odd issue since the docs say to return the data.

jarrod_not_jared
3 years ago
You should either destructure data from the args, async ({ data }) => {} or name data something else so it’s less confusing. In your scenario, without adjusting anything, the hook wants you to return data.data
gregwhitworth3 years ago
thanks, while you're here - any idea why onSuccess and redirect aren't firing even though the data was posted into Mongo?

<Form method="post" validationOperation='create' redirect={
${serverURL}
} action={
${serverURL}${api}/users
} onSuccess={onSuccess}>

it works in the default create first user and so I have it setup the same way but for some reason they don't occur
jarrod_not_jared
3 years ago
What’s you’re network tab look like for the submission post request? (The response tab specifically)
gregwhitworth3 years ago
{"message":"User successfully created.","doc":{"id":"637acd59efa53d9e0b28809b","firstName":"Fake","lastName":"User","email":"another@something.com","createdAt":"2022-11-21T00:59:05.976Z","updatedAt":"2022-11-21T00:59:05.976Z"}}
jarrod_not_jared
3 years ago
Ok and what does your onSuccess method look like? Can you log the json that is supposed to be sent back to it?
gregwhitworth3 years ago
It's the same success method the original used:

const onSuccess = (json) => { var _a; if ((_a = json === null || json === void 0 ? void 0 : json.user) === null || _a === void 0 ? void 0 : _a.token) { setToken(json.user.token); } setInitialized(true); console.log(json); };

The method isn't being triggered so there is no JSON that I can log out and provide you. I'm not sure if this is due to the erroneous validationErrors that seem to crop up from time to time.

@281120856527077378

@245330411570331648
the onSuccess method isn't being fired which lead me to look at the rendered markup. The onSuccess attribute has been stripped. Is this expect, here is a screenshot from my devtools:

Here is the form markup in React itself:

<Form method="post" validationOperation='create' action={
${serverURL}${api}/createAccount
} onSuccess={onSuccess}>
jarrod_not_jared
3 years ago
onSuccess is just a prop that gets sent to the
Form
component, you can see all props it accepts here:
https://github.com/payloadcms/payload/blob/master/src/admin/components/forms/Form/index.tsx

Only valid html element properties will show up in the DOM. The rest are just passed to the component which allows it to do what it needs. I am unable to dive into it right now, so I am unsure why your onSuccess method is not firing, maybe you can take a peek at the linked file above and attempt to trace down your scenario. The onSuccess method gets fired in the onSubmit function.

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.