Skip to content
Get help on Slack

Trouble with URL validation and relative links in Slack thread

7 replies
Last updated: May 17, 2021
Hey-O, I am not able to get the URL validation working correctly. đŸ€Ż
validation: (Rule) =>
  Rule.required().uri({
    allowRelative: true, // Allow relative links
    relativeOnly: false, // Force only relative links
    scheme: ["https"], // Default is ["https", "http"]
  }),
},
I want to be able to provide links in the input field like “/home” || “/contact”, but seems allowRelative isn’t working or that specifying the scheme to https only is blocking that rule. Any suggestions?

I’ve tried validation on local and deployed environment
May 13, 2021, 3:41 PM
would a custom validation work? i.e.
Rule.required().custom(
  (url) => (
    url[0] === '/' ||
    url.includes('https://')
  )
)
May 13, 2021, 4:07 PM
user P
Doesn’t seem like it does. I’ve done other custom validations with regex as well and wasn’t able to get a validation working. The example in my code block is what the default recommendation I could find anywhere suggest. I assume it is an issue with the handling of the options blocking each other.
May 13, 2021, 4:44 PM
Hi both, sorry about the confusion here: I believe at this point both 
uri()
and 
custom()
validation are required to get it to work. Could you try this snippet that was shared in the community a while ago?

Rule => Rule.required()
  .uri({
    allowRelative: true,
    scheme: ['https', 'http', 'mailto', 'tel'],
  })
  .custom(url => {
    if (!url) return 'URL is required';
    const isRelative = url.startsWith('/');
    const hasValidProtocol = ['https', 'mailto', 'tel'].some(protocol => url.startsWith(`${protocol}:`));
    const isValid = isRelative || hasValidProtocol;
    const msg = 'Must either start with "/", or with one of: "https://", "mailto:", or "tel:"';
     return isValid || msg;
   })
May 13, 2021, 5:20 PM
user M
I will give that a try
May 13, 2021, 6:03 PM
user M
This one did not work in my case. Appreciating the help, was this solution one that was working for you?
May 13, 2021, 6:58 PM
user A
user M
I was able to get it to work, simply just having https in the scheme option would not allow the validation to work when adding in relative links. If I didn’t have ‘http’ in the scheme it wouldn’t allow me to have relative links, so I had to add http back in. I know that we exclude http below in the custom rule, but seemed odd to have http in the scheme options at all just to have relative links enabled.
Should there just be a scheme that would do this for you, like if I only wanted https and relative then I would do this in the scheme options, relative would just allow anything to start with “/” you could also add a scheme that allows anchors which would be anything to start with “#” with page navigation and etc.

scheme: [ 'https', 'relative', 'anchor' ]
May 17, 2021, 9:03 PM
Good to hear you got it working! 🎉
May 17, 2021, 10:03 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.

Get started for freeExplore the demo

Was this answer helpful?