👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Custom validation for slug fields to enforce proper formatting

7 replies
Last updated: May 5, 2020
I noticed today that
type: 'slug'
can have spaces and capitalizations in it. Someone on our team instead of clicking "Generate" on the slug typed something in and we didn't catch it before it was published which kinda messed things up. I can go back and correct it obviously but what is the best way to enforce a
type: 'slug'
to actually be a slug (at least the way I think of a slug) - do a custom validation against capital letters and spaces?
May 4, 2020, 9:43 PM
Or just use my own
slugify
function
May 4, 2020, 9:48 PM
Hi User, I think it’s surprising this only seems to have come up now because, indeed, it does allow spaces and caps by default. I’m not sure if it should, so thanks for reporting.
Unless I’m overlooking something, I think using a custom
slugify
function would just handle string normalisation via the Generate button but not necessarily resolve the validation (or lack thereof) issue.
If you want to go down the RegEx route, you could try using a regular expression like this:

/^
  [a-z0-9]+   # One or more repetition of given characters
  (?:         # A non-capture group.
    -           # A hyphen
    [a-z0-9]+   # One or more repetition of given characters
  )*          # Zero or more repetition of previous group
 $/
Haven’t tested yet, but implemented that would look something like this:

...
validation: Rule =>
      Rule.regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/),
...
May 4, 2020, 10:00 PM
Hi User, I think it’s surprising this only seems to have come up now because, indeed, it does allow spaces and caps by default. I’m not sure if it should, so thanks for reporting.
Unless I’m overlooking something, I think using a custom
slugify
function would just handle string normalisation via the Generate button but not necessarily resolve the validation (or lack thereof) issue.
If you want to go down the RegEx route, you could try using a regular expression like this:

/^
  [a-z0-9]+   # One or more repetition of given characters
  (?:         # A non-capture group.
    -           # A hyphen
    [a-z0-9]+   # One or more repetition of given characters
  )*          # Zero or more repetition of previous group
 $/
Haven’t tested yet, but implemented that would look something like this:

...
validation: Rule =>
      Rule.regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/),
...
May 4, 2020, 10:00 PM
Yeah it looks like the
slugify
option is only triggered when the user clicks "Generate" - custom validation must be the way to go
May 4, 2020, 10:03 PM
validator for flag "regex" not found
My studio is up to date, am I missing something?
May 4, 2020, 10:31 PM
Hi again User, sorry about that. I’m not sure what causes that notation to work in some types and not in others - perhaps it’s the object causing difficulties. Anyway, just tested and this approach seems to work🤞
...    
validation: Rule => Rule.custom(slug => {
      const regex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
      return regex.test(slug.current)
    }),
...
May 5, 2020, 11:45 AM
Thanks!
May 5, 2020, 11:49 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?