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
slugifyfunction
May 4, 2020, 9:48 PM
M
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
If you want to go down the RegEx route, you could try using a regular expression like this:
Haven’t tested yet, but implemented that would look something like this:
Unless I’m overlooking something, I think using a custom
slugifyfunction 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
$/...
validation: Rule =>
Rule.regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/),
...May 4, 2020, 10:00 PM
P
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
If you want to go down the RegEx route, you could try using a regular expression like this:
Haven’t tested yet, but implemented that would look something like this:
Unless I’m overlooking something, I think using a custom
slugifyfunction 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
$/...
validation: Rule =>
Rule.regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/),
...May 4, 2020, 10:00 PM
D
Yeah it looks like the
slugifyoption is only triggered when the user clicks "Generate" - custom validation must be the way to go
May 4, 2020, 10:03 PM
D
validator for flag "regex" not foundMy studio is up to date, am I missing something?
May 4, 2020, 10:31 PM
P
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
D
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.