form validation implemented
This commit is contained in:
parent
a2b0fb2b2f
commit
9f7724282c
|
|
@ -13,6 +13,9 @@ import { highlightColor } from "../../helpers/otherVariables";
|
|||
import Loader from "../global/Loader";
|
||||
import Status from "../contact/Status";
|
||||
|
||||
// Validators
|
||||
import { validateEmail } from "../../validators/validateEmail";
|
||||
|
||||
// Icons
|
||||
import forward from "../../icons/arrow-forward.svg";
|
||||
import email from "../../icons/email-black.svg";
|
||||
|
|
@ -54,15 +57,34 @@ const ContactForm = () => {
|
|||
message: "",
|
||||
});
|
||||
|
||||
const [alert, setAlert] = useState({
|
||||
name: false,
|
||||
email: false,
|
||||
message: false,
|
||||
});
|
||||
|
||||
const [load, setLoad]: stateBool = useState(false);
|
||||
const [triggered, setTriggered]: stateBool = useState(false);
|
||||
const [sent, setSent]: stateBool = useState(false);
|
||||
const [validation, setValidation]: stateBool = useState(false);
|
||||
|
||||
const status = {
|
||||
success: "Ваше сообщение успешно отправлено",
|
||||
error: "Не удалось отправить сообщение",
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
data.name.length !== 0 &&
|
||||
validateEmail(data.email) &&
|
||||
data.message.length !== 0
|
||||
) {
|
||||
setValidation(true);
|
||||
} else {
|
||||
setValidation(false);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
getContact(setContact);
|
||||
}, []);
|
||||
|
|
@ -96,7 +118,7 @@ const ContactForm = () => {
|
|||
</div>
|
||||
<div className="contact-form-right-middle">
|
||||
<div className="contact-form-link">
|
||||
{contact ? (
|
||||
{contact[0].id !== -1 ? (
|
||||
<div className="contact-form-link-left">
|
||||
<div className="link-icon">
|
||||
<img src={pin} alt="" />
|
||||
|
|
@ -111,7 +133,7 @@ const ContactForm = () => {
|
|||
highlightColor={highlightColor}
|
||||
/>
|
||||
)}
|
||||
{contact ? (
|
||||
{contact[0].id !== -1 ? (
|
||||
<a
|
||||
className="contact-form-link-left"
|
||||
target="_blank"
|
||||
|
|
@ -134,7 +156,7 @@ const ContactForm = () => {
|
|||
</div>
|
||||
<div className="contact-form-link links">
|
||||
<div className="contact-form-link-right">
|
||||
{contact ? (
|
||||
{contact[0].id !== -1 ? (
|
||||
<a
|
||||
href={contact[0].instagram}
|
||||
target="_blank"
|
||||
|
|
@ -150,7 +172,7 @@ const ContactForm = () => {
|
|||
highlightColor={highlightColor}
|
||||
/>
|
||||
)}
|
||||
{contact ? (
|
||||
{contact[0].id !== -1 ? (
|
||||
<a
|
||||
href={contact[0].twitter}
|
||||
target="_blank"
|
||||
|
|
@ -168,7 +190,7 @@ const ContactForm = () => {
|
|||
)}
|
||||
</div>
|
||||
<div className="contact-form-link-right">
|
||||
{contact ? (
|
||||
{contact[0].id !== -1 ? (
|
||||
<a
|
||||
href={contact[0].youtube}
|
||||
target="_blank"
|
||||
|
|
@ -184,7 +206,7 @@ const ContactForm = () => {
|
|||
highlightColor={highlightColor}
|
||||
/>
|
||||
)}
|
||||
{contact ? (
|
||||
{contact[0].id !== -1 ? (
|
||||
<a
|
||||
href={contact[0].facebook}
|
||||
target="_blank"
|
||||
|
|
@ -206,7 +228,9 @@ const ContactForm = () => {
|
|||
<div className="contact-form-right-bottom">
|
||||
<div className="input-blocks-wrapper">
|
||||
<div className="input-block">
|
||||
<label htmlFor="name">Имя</label>
|
||||
<label htmlFor="name">
|
||||
Имя <span className="red">*</span>
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
autoSave="true"
|
||||
|
|
@ -216,15 +240,28 @@ const ContactForm = () => {
|
|||
id="name"
|
||||
placeholder="Аман Аманов"
|
||||
onPaste={(e: any) => {
|
||||
setAlert({ ...alert, name: true });
|
||||
setData({ ...data, name: e.target.value });
|
||||
}}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setAlert({ ...alert, name: true });
|
||||
setData({ ...data, name: e.target.value });
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className={
|
||||
alert.name && data.name.length === 0
|
||||
? "form-warning active"
|
||||
: "form-warning"
|
||||
}
|
||||
>
|
||||
Это поле обязательно для заполнения
|
||||
</span>
|
||||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="email">Email</label>
|
||||
<label htmlFor="email">
|
||||
Email <span className="red">*</span>
|
||||
</label>
|
||||
<input
|
||||
autoSave="true"
|
||||
autoComplete="true"
|
||||
|
|
@ -234,30 +271,55 @@ const ContactForm = () => {
|
|||
id="email"
|
||||
placeholder="aman@gmail.com"
|
||||
onPaste={(e: any) => {
|
||||
setAlert({ ...alert, email: true });
|
||||
setData({ ...data, email: e.target.value });
|
||||
}}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setAlert({ ...alert, email: true });
|
||||
setData({ ...data, email: e.target.value });
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className={
|
||||
alert.email && !validateEmail(data.email)
|
||||
? "form-warning active"
|
||||
: "form-warning"
|
||||
}
|
||||
>
|
||||
Введен некорректный email
|
||||
</span>
|
||||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="text">Чем мы можем помочь вам?</label>
|
||||
<label htmlFor="text">
|
||||
Чем мы можем помочь вам? <span className="red">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
required
|
||||
name="text"
|
||||
id="text"
|
||||
placeholder="Расскажите нам о вашей проблеме..."
|
||||
onPaste={(e: any) => {
|
||||
setAlert({ ...alert, message: true });
|
||||
setData({ ...data, message: e.target.value });
|
||||
}}
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setAlert({ ...alert, message: true });
|
||||
setData({ ...data, message: e.target.value });
|
||||
}}
|
||||
></textarea>
|
||||
<span
|
||||
className={
|
||||
alert.message && data.message.length === 0
|
||||
? "form-warning active"
|
||||
: "form-warning"
|
||||
}
|
||||
>
|
||||
Это поле обязательно для заполнения
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
disabled={!validation}
|
||||
type="submit"
|
||||
onClick={(e: React.FormEvent<HTMLButtonElement>) => {
|
||||
setLoad(true);
|
||||
|
|
@ -267,6 +329,10 @@ const ContactForm = () => {
|
|||
>
|
||||
Отправить сообщение
|
||||
</button>
|
||||
<span className="form-note">
|
||||
Поля отмеченные <span className="red">*</span> обязательны для
|
||||
заполнения
|
||||
</span>
|
||||
<Status message={status} success={sent} active={triggered} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import { useRef, useEffect } from "react";
|
||||
|
||||
export const useDidUpdateEffect = (fn: () => void, inputs: any) => {
|
||||
const didMountRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (didMountRef.current) {
|
||||
return fn();
|
||||
}
|
||||
didMountRef.current = true;
|
||||
}, inputs);
|
||||
};
|
||||
|
|
@ -183,6 +183,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
.form-note {
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.form-warning {
|
||||
color: red;
|
||||
font-size: 1.4rem;
|
||||
text-align: left;
|
||||
height: 100%;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
@include transition-std;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
max-height: 1.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Adaptive
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@
|
|||
min-height: 68vh;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url(../images/body-bg.jpg) repeat center;
|
||||
background-size: cover;
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ $hover-green: #0e654e;
|
|||
transition: none;
|
||||
transform: scale(1) !important;
|
||||
background: #7d7d7d !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
export const validateEmail = (email: string): boolean => {
|
||||
const mailReg: RegExp =
|
||||
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
|
||||
if (!mailReg.test(email)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
Loading…
Reference in New Issue