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

Best Practice Validation for Different Types of Fields (Slugs, Titles, etc.)

6 replies
Last updated: Mar 16, 2022
Curious if anyone has a list of “best practice” validations for different types of fields (slugs, titles, etc.)?
Mar 16, 2022, 2:30 PM
I would say for most things it could be heavily dependant on the team/business, but for certain things like slugs for example which have a bit more ‘standards’ around in the web anyway is that they should be lowercase and kebab-case.
Certain things around words aka Titles etc will be very subjective and I doubt there would be much common expectations around them
Mar 16, 2022, 2:35 PM
Yeah, that makes sense when you say it like that
Mar 16, 2022, 2:36 PM
There's an incredible tutorial put out by Simeon Griggs with URL's that we use on pretty much every project
Mar 16, 2022, 2:37 PM
Fantastic, will check it out! Thanks
Mar 16, 2022, 2:45 PM
One of the cool things in the studio is using it as a way to practice different js ideas and get immediate results. This is totally unnecessary for nearly any real use case and likely can be written cleaner, but it was a fun experiment with js objects and regex in a schema.
I wanted to try to get more granular control of the included slug function along with prepended a small hex string. Maybe it can give you some inspiration:
insert hex:



function slugHex() {
  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min) + min);
  }
  // hex 5 digits: [10000-fffff]
  let x = 65536
  let y = 1048575
  return (getRandomInt(x,y).toString(16) + '-')
}
call it in the schema:



{
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        slugify: input => input
            .toLowerCase()
            .replace(/^/, slugHex())
            .replace(/\s+/g, '-')
            .replace(/[^\w\-]+/g, '')
            .replace(/\-\-+/g, '-')
            .replace(/^-+/, '') 
            .replace(/-+$/, '')
            .slice(0, 101)
      },
Mar 16, 2022, 10:37 PM

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?