Form validation

[amilliiee]

Contributor checklist

• [x] This pull request is on a separate branch and not the main branch

---

Description

FormKit validation PR to determine if we need to pivot.

Related issue

• 841

[github-actions[bot]]

Thank you for the pull request!

The activist team will do our best to address your contribution as soon as we can. The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

If you're not already a member of our public Matrix community, please consider joining! We'd suggest using Element as your Matrix client, and definitely join the General and Development rooms once you're in. Also consider joining our bi-weekly Saturday dev syncs. It'd be great to have you!

Maintainer checklist

• [x] The commit messages for the remote branch should be checked to make sure the contributor's email is set up correctly so that they receive credit for their contribution

  • The contributor's name and icon in remote commits should be the same as what appears in the PR
  • If there's a mismatch, the contributor needs to make sure that the email they use for GitHub matches what they have for git config user.email in their local activist repo

• [x] The TypeScript and formatting workflows within the PR checks do not indicate new errors in the files changed

• [x] The Playwright end to end and Zap penetration tests have been ran and are passing (if necessary)

• [x] The CHANGELOG has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)

[netlify[bot]]

✅ Deploy Preview for activist-org ready!

Name	Link
🔨 Latest commit	036c3d76c5ee64adbc88ae5969b624fb55ecd3f4
🔍 Latest deploy log	https://app.netlify.com/sites/activist-org/deploys/6671c9e7cd8f440008bf6d51
😎 Deploy Preview	https://deploy-preview-897--activist-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[to-sta]

@andrewtavis, can you look into the styling of the error messages.

In case you want to change or add error message, these are part of the schema now.

export const organizationSchema = z.object({
    name: z.string().min(1, "Name must have at least 1 character").max(55, "Name must be less than 55 characters"),
    location: z.string().min(1).max(100),
    description: z.string().min(1).max(1000),
    tagline: z.string().max(100).optional(),
    social_accounts: z.array(z.string()).optional(),
    topics: z.array(z.string()).min(1).optional(),
  });

You can insert a custom error message for every constraint (e.g. name).

[andrewtavis]

Is looking good, @to-sta! One thing for now is maybe we don't need to do a min topic as that won't be in the MVP?

[to-sta]

Is looking good, @to-sta! One thing for now is maybe we don't need to do a min topic as that won't be in the MVP?

Hmm gotcha, but this field is optional. If it is provided it has to have at least one element. Thought that does the job for the current MVP and beyond 😄

[andrewtavis]

Makes sense 👍 Thanks for the explanation 🙏

[andrewtavis]

Quick note on this via a conversation with @to-sta: We do want to make sure that the errors are apparent to the user - specifically being formatted differently and being red text. This is something that should be achievable via adding in a custom <style> block, or could be done in the FormKit config file (the latter is likely best practice, if possible). If it's not possible to do this in the config, then we could certainly write a custom CSS file that can just be imported into the <style> blocks :)

[andrewtavis]

Thanks for your patience here, @amilliiee! Just now have gotten through the rest of the pressing PRs, and this one will be next :) It'll likely be sometime over the weekend before it comes in, but I'll get to it when I can 😊