Incorporating form validation into a Next JS / Sanity project for an online exhibition page.
10 replies
Last updated: Sep 14, 2022
H
Hello, I’m looking at how to incorporate form validation into my Next JS / Sanity project, it’s for a ‘viewing room’ page — an online exhibition page that requires the visitor to submit their email address in order to view the page. There is no further authentication required and there is no login per se. Simply I need to be able to receive and store a submitted email address securely, and then allow access to the next page on receipt of a valid email address. Is it possible to get a response object from Sanity to confirm the submitted data perhaps? Would I be right to look at the next-auth sanity plugin (seems like it might be more for dealing with logged in users)? Very very grateful for any steering / tips.This is exactly an example of the type of use case:
https://whitecube.viewingrooms.com/viewing-room/introductions-sara-flores/
https://whitecube.viewingrooms.com/viewing-room/introductions-sara-flores/
Sep 6, 2022, 3:30 PM
S
Hello
Because if you only need to validate that the user is putting in an email string and not some other random ones, I can give you some regex-validation I run in my nextJS forms
😉
user C
👋The question is, which kind of validation would you like to be running?Because if you only need to validate that the user is putting in an email string and not some other random ones, I can give you some regex-validation I run in my nextJS forms
😉
Sep 8, 2022, 1:59 PM
H
Hello
user J
Thanks for your message! 👋 That’s a good thought, perhaps some regex validation is all I need here. That would be really kind if you are happy to share what you use ✨Sep 8, 2022, 3:19 PM
S
I will look for it tomorrow, I can’t find it anymore and I have so much code 😅 But I know it is somewhere.
Sep 8, 2022, 8:06 PM
H
I can only imagine the endless snippets you must gather 🙃 Thanks so much though, no rush, and no stress if it’s too tricky to find
Sep 9, 2022, 1:45 PM
S
I FOUND IT (on our own site, where I published it… google helped me find it 😅 And it shows how we all tend to not use it enough)
{
name: 'email',
title: 'Email',
type: 'string',
validation: Rule => Rule.custom(email => {
if (typeof email === 'undefined') {
return true // Allow undefined values
}
return email.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
)
? true
: 'This is not an email'
})
}Sep 9, 2022, 5:15 PM
S
Sep 9, 2022, 5:15 PM
H
Amazing, thanks so much
user J
😄Sep 11, 2022, 4:36 PM
S
I mean, past-me thought it might be useful, and both of present us did not think of Google early enough (I saw my validation code in a presentation on Friday, remembered that I read something similar somewhere and THEN Googled it ... Well it was my code in the first place 😂 )
Sep 11, 2022, 8:09 PM
H
It could be a scene from Tenant, haha. It’s a good reminder for me that there are so many useful snippets published on the Sanity site, even when I think I have browsed it thoroughly! 💫 It’s been very useful btw, thanks again!
Sep 14, 2022, 1:09 PM
S
And it should also be a reminder to publish more… I think we all have snippets like this 🙂
Sep 14, 2022, 3:31 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.