Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix error validation on email address field #725

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Fix error validation on email address field #725

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05eb73b
Fix error validation on email address field
Feb 9, 2025
844b042
fix-emailError
Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion apps/web/src/components/ui/input-spotlight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
'use client'
import type { Dispatch, SetStateAction } from 'react'
import React, { useRef, useState } from 'react'
import { toast } from 'sonner'

interface InputBorderSpotlightProps {
setEmail: Dispatch<SetStateAction<string>>
Expand Down Expand Up @@ -41,6 +42,18 @@ export function InputBorderSpotlight({
setOpacity(0)
}

const validateEmail = (email: string): void => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
if (!emailRegex.test(email)){
toast.custom(() => (
<div className="text-brandBlue border-brandBlue/20 bg-errorRed w-[90vw] rounded-lg border p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]">
<p className="text-sm">Please enter a valid email address</p>
</div>
))
return
}
}

return (
<div className="relative w-80">
<input
Expand All @@ -59,7 +72,7 @@ export function InputBorderSpotlight({
onMouseMove={handleMouseMove}
placeholder="Enter your email address"
size={25}
type="email"
type="text"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't want to change this

Copy link
Author

@mohsenkhosroanjam mohsenkhosroanjam Feb 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was wondering how the tooltip could be removed. As I know, the tooltip error is thrown from the browser and when the type is "email", the browser does the validation and throws error with tooltip. Am I right?
I have changed it to text to let the browser know that I don't want the browser to check this field whether it is email or not.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kriptonian1 what are your thoughts on this? I think the browser tooltip looks out of theme, and it should be replaced with the toast

/>
<input
aria-hidden="true"
Expand Down
Loading