Warum bekomme ich immer wieder ungültige E -Mails von meinem Eingabefeld? E -Mailjs ⇐ JavaScript

[Anonymous]

Ich entwickle derzeit eine E-Portfolio-Website, während ich die endgültigen Schritte für die Website erstellt und ein Problem mit meinem Eingabebereich-Bereich erstellt und Arbeitgebern die Möglichkeit gebe, über die Website mit mir in Kontakt zu treten. Da ich es jedoch codiert habe, erhalte ich immer wieder ein "ungültiges E -Mail" -Popup, aber ich bin mir nicht sicher, warum. Im Folgenden habe ich einen Ausschnitt aus dem Code sowie einen Screenshot der ungültigen E -Mail -Fehlermeldung bereitgestellt, wenn auch mit meiner tatsächlichen E -Mail -Adresse. class = "snippet-code">

Code: Select all

import { useState, useEffect } from "react"
import "./style.css"
import BackgroundLines from "../BackgroundLines"
import ParaWriting from "../ParaWriting"
import { motion, useAnimation } from "framer-motion"
import ArrowUpRightIcon from "../../assets/Icon/arrow-up-right.svg"
import { useInView } from "react-intersection-observer"
import Button from "../Button"
import Time from "../Time"

// emailjs
import emailjs from "@emailjs/browser"

// JSON
import emailjsconfig from "../../constants/emailjs.json"
import Alert from "../Alert"

export default function Footer() {
const controls = useAnimation()
const [ref, inView] = useInView()
const [isSending, setIsSending] = useState(false)
const [sendStatus, setSendStatus] = useState({ processed: false, message: "", variant: "success" })
const [hasAnimated, setHasAnimated] = useState(false)
const [fieldValues, setFieldValues] = useState({
name: false,
email: false,
message: false,
})

const handleComplete = () => {
setHasAnimated(true)
}

useEffect(() => {
// Start animation when the component is in view
if (inView && !hasAnimated) {
controls.start("visible")
}
}, [inView, controls])

const opacityVariant = {
hidden: { opacity: 0 },
visible: { opacity: 1 },
}

const inputFieldLineVariant = {
hidden: { width: "0%" },
visible: {
width: "100%",
},
}

const inputFields = [
{
label: "Name",
type: "text",
id: "name",
placeholder: "Enter name",
stateKey: "name",
},
{
label: "Email",
type: "email",
id: "email",
placeholder: "[email protected]",
stateKey: "email",
},
{
label: "Message",
type: "textarea",
id: "message",
placeholder: "Your message",
rows: "8",
wrap: "soft",
stateKey: "message",
},
]

const handleInputClick = (stateKey) => {
setFieldValues({
...fieldValues,
[stateKey]: true,
})
}

const timeoutAlert = () =>
setTimeout(() => {
setSendStatus({ ...sendStatus, processed: false })
}, 5000)

const sendEmail = async () => {
const requiredFields = ["name", "email", "message"]
const missingFields = requiredFields.filter((field) => !fieldValues[field])

if (missingFields.length > 0) {
setSendStatus({ processed: true, variant: "error", message: "Not all fields were filled" })
timeoutAlert()
return
}

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
if (!emailRegex.test(fieldValues.email)) {
setSendStatus({ processed: true, variant: "error", message: "Invalid email" })
return
}

setIsSending(true)
try {
const { serviceId, templateid, publicKey } = emailjsconfig

console.log("trigger")

const templateParams = {
name: fieldValues.name,
email: fieldValues.email,
message: fieldValues.message,
}

const response = await emailjs.send(serviceId, templateid, templateParams, publicKey)

console.log("Email sent successfully:", response)
setIsSending(false)
setSendStatus({ processed: true, variant: "success", message: "Success!" })
} catch (error) {
console.error("Error sending email:", error)
setIsSending(false)
setSendStatus({ processed: true, variant: "error", message: "Error" })
}

timeoutAlert()
}

return (








{inputFields.map((field, index) =>  (

{field.label}
{field.type === "textarea" ?  handleInputClick(field.stateKey)}> :  handleInputClick(field.stateKey)} />}




))}






 handleComplete()}>
Copyright © {new Date().getFullYear()} Cameron Watkins






)
}

Wenn zusätzliche Informationen erforderlich sind, bin ich mehr als gerne das GitHub -Repo, danke im Voraus.