Skip to content

Commit

Permalink
Merge pull request Anjaliavv51#107 from Daveless/add-validation-to-forms
Browse files Browse the repository at this point in the history 
forms validation Added
  • Loading branch information
@gauravsingh1281
gauravsingh1281 authored Oct 28, 2023
2 parents 7fd06c3 + 7f6a183 commit 2ed9bf1
Show file tree
Hide file tree
Showing 4 changed files with 312 additions and 48 deletions.
137 changes: 116 additions & 21 deletions src/components/Contact-section/ContactForm.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,140 @@
import { useState } from "react";
import Github from "../../assets/Social-Icons/Github.png";
import Insta from "../../assets/Social-Icons/instagram.png";
import Twitter from "../../assets/Social-Icons/Twitter.png";

const ContactForm = () => {
const [contactForm, setContactForm] = useState({
firstName: "",
lastName: "",
email: "",
message: "",
});

const [contactErrors, setContactErrors] = useState({});

const handlechange = (e) => {
setContactForm({ ...contactForm, [e.target.name]: e.target.value });
};

const handleSubmit = (e) => {
e.preventDefault();
const validationContactErrors = {};
if (!contactForm.firstName.trim()) {
validationContactErrors.firstName = "First name is required";
}
if (!contactForm.lastName.trim()) {
validationContactErrors.lastName = "Last name is required";
}
if (!contactForm.email.trim()) {
validationContactErrors.email = "Email is required";
}
if (!/\S+@\S+\.\S+/.test(contactForm.email)) {
validationContactErrors.email = "Email is not valid";
}
if (!contactForm.message.trim()) {
validationContactErrors.message = "Message is required";
}
setContactErrors(validationContactErrors);

if (Object.keys(validationContactErrors).length === 0) {
alert("Message sent successfully");
setContactForm({
firstName: "",
lastName: "",
email: "",
message: "",
});
}
};
return (
<>
<section className="lg:w-[45%] w-full flex justify-center items-center">
<div className="flex flex-1 justify-center p-5 md:p-0 md:mr-24">
<form className="gap-x-5 w-full">
<section className="flex flex-col md:flex-row gap-y-10 my-20">
{/* left hand side of the form */}
<article className="flex-1 text-center md:text-left md:ml-24">
<h2 className="text-3xl lg:text-5xl font-bold tracking-wider mb-10 font-monsterrat text-textBlack">
Connect with <span className="text-customRed">Us</span>
</h2>
<div
className="flex gap-x-12 justify-center md:justify-start"
style={{ height: "min-content", alignItems: "baseline" }}
>
<a href="https://twitter.com/gauravsingh1281">
<img src={Twitter} alt="Twitter-logo" className="h-14" />
</a>
<a href="https://github.com/gauravsingh1281">
<img src={Github} alt="Github-logo" className="h-14" />
</a>
<a href="https://www.instagram.com/gauravsingh1281">
<img src={Insta} alt="Insta-logo" className="h-14" />
</a>
</div>
</article>
{/* Right hand side of the form */}
<article className="flex flex-1 justify-center p-5 md:p-0 md:mr-24">
<form onSubmit={handleSubmit} className="gap-x-5 w-full">
<div className="flex flex-col md:flex-row mb-6 justify-between">
<input
className="border-2 border-green rounded-lg text-green-dark h-16 md:w-6/12 mb-6 md:mb-0 placeholder-textBlack p-2"
placeholder="First name"
style={{ marginRight: "5px" }}
/>
<input
className="border-2 border-green rounded-lg h-16 md:w-6/12 text-green-dark placeholder-textBlack p-2"
placeholder="Last name"
/>
<div className="flex flex-col md:w-6/12">
<input
name="firstName"
value={contactForm.firstName}
className="border-2 border-green rounded-lg text-green-dark h-16 mb-6 md:mb-0 placeholder-textBlack p-2"
placeholder="First name"
style={{ marginRight: "5px" }}
onChange={handlechange}
/>
<span className="pl-4 text-[#ff0000] text-sm">
{contactErrors.firstName}
</span>
</div>
<div className="flex flex-col md:w-6/12">
<input
className="border-2 border-green rounded-lg h-16 text-green-dark placeholder-textBlack p-2"
placeholder="Last name"
name="lastName"
value={contactForm.lastName}
onChange={handlechange}
/>
<span className="pl-4 text-[#ff0000] text-sm">
{contactErrors.lastName}
</span>
</div>
</div>
<div className="flex flex-col md:flex-row mb-6 justify-between">
<input
className="border-2 border-green rounded-lg h-16 w-full text-green-dark placeholder-textBlack p-2"
placeholder="Email"
/>
<div className="flex flex-col w-full">
<input
className="border-2 border-green rounded-lg h-16 text-green-dark placeholder-textBlack p-2"
placeholder="Email"
name="email"
value={contactForm.email}
onChange={handlechange}
/>
<span className="pl-4 text-[#ff0000] text-sm">
{contactErrors.email}
</span>
</div>
</div>

<textarea
className="border-2 border-green rounded-lg w-full h-40 text-green-dark placeholder-textBlack mb-6 p-2"
className="border-2 border-green rounded-lg w-full h-40 text-green-dark placeholder-textBlack p-2"
placeholder="Your message here"
name="message"
value={contactForm.message}
onChange={handlechange}
/>
<span className="pl-4 text-[#ff0000] text-sm">
{contactErrors.message}
</span>
<div className="flex justify-center md:justify-start ">
<div
className="relative flex cursor-pointer items-center justify-center bg-green rounded-lg w-40 lg:w-60 p-3 text-textWhite text-2xl md:text-xl font-bold font-monsterrat ease-in-out duration-300 hover:bg-[transparent] hover:text-green hover:border-green hover:border-[2px]"
<button
className="relative flex cursor-pointer items-center justify-center mt-5 bg-green rounded-lg w-40 lg:w-60 p-3 text-textWhite text-2xl md:text-xl font-bold font-monsterrat ease-in-out duration-300 hover:bg-[transparent] hover:text-green hover:border-green hover:border-[2px]"
type="submit"
>
Submit
</div>
</button>
</div>
</form>
</div>
</article>
</section>
</>
);
Expand Down
120 changes: 104 additions & 16 deletions src/components/connectUs-section/Form.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,107 @@
import { useState } from "react";

const Form = () => {
return (
<div>
<form action="">
<div className="flex flex-col gap-4 md:px-4">
<div className="flex justify-between gap-2">
<input type="text" name="fname" id="" placeholder="First Name" className="placeholder-text" />
<input type="text" name="lname" placeholder="Last Name" className="placeholder-text" />
</div>
<input type="email" placeholder="Write yout Email here" className="placeholder-text" />
<textarea name="message" id="" cols="30" rows="10" className="placeholder-text" placeholder="Your Massege"></textarea>
<button className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white" type="submit">Submit</button>
</div>
</form>
const [contactForm, setContactForm] = useState({
firstName: "",
lastName: "",
email: "",
message: "",
});

const [contactErrors, setContactErrors] = useState({});

const handlechange = (e) => {
setContactForm({ ...contactForm, [e.target.name]: e.target.value });
};

const handleSubmit = (e) => {
e.preventDefault();
const validationContactErrors = {};
if (!contactForm.firstName.trim()) {
validationContactErrors.firstName = "First name is required";
}
if (!contactForm.lastName.trim()) {
validationContactErrors.lastName = "last name is required";
}
if (!contactForm.email.trim()) {
validationContactErrors.email = "email is required";
}
if (!/\S+@\S+\.\S+/.test(contactForm.email)) {
validationContactErrors.email = "email is not valid";
}
if (!contactForm.message.trim()) {
validationContactErrors.message = "message is required";
}
setContactErrors(validationContactErrors);

if (Object.keys(validationContactErrors).length === 0) {
alert("Message sent successfully");
setContactForm({
firstName: "",
lastName: "",
email: "",
message: "",
});
}
};
return (
<div>
<form action="" onSubmit={handleSubmit}>
<div className="flex flex-col gap-4 md:px-4">
<div className="flex justify-between gap-2">
<input
type="text"
name="firstName"
id=""
placeholder="First Name"
onChange={handlechange}
className="placeholder-text"
/>
<span className="pl-4 text-[#ff0000] text-sm">
{contactErrors.firstName}
</span>
<input
type="text"
name="lastName"
placeholder="Last Name"
onChange={handlechange}
className="placeholder-text"
/>
<span className="pl-4 text-[#ff0000] text-sm">
{contactErrors.lastName}
</span>
</div>
<input
type="email"
name="email"
placeholder="Write yout Email here"
onChange={handlechange}
className="placeholder-text"
/>
<span className="pl-4 text-[#ff0000] text-sm">
{contactErrors.email}
</span>
<textarea
name="message"
cols="30"
rows="10"
onChange={handlechange}
className="placeholder-text"
placeholder="Your Massege"
></textarea>
<span className="pl-4 text-[#ff0000] text-sm">
{contactErrors.message}
</span>
<button
className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white"
type="submit"
>
Submit
</button>
</div>
)
}
</form>
</div>
);
};

export default Form;
export default Form;
31 changes: 28 additions & 3 deletions src/pages/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,32 @@ export default function Login() {
password: "",
});

const [errors, setErrors] = useState({});
const handleChange = (e) => {
setForm({ ...form, [e.target.name]: e.target.value });
};

const handleSubmit = (e) => {
e.preventDefault();
const validationErrors = {};

if (!form.email.trim()) {
validationErrors.email = "email is required";
}

if (!form.password.trim()) {
validationErrors.password = "password is required";
}

setErrors(validationErrors);

if (Object.keys(validationErrors).length === 0) {
alert("Login Succesful");
setForm({
email: "",
password: "",
});
}
};

return (
Expand Down Expand Up @@ -47,7 +67,7 @@ export default function Login() {
onSubmit={handleSubmit}
className="mt-5 space-y-5 w-[70%] md:w-[50%] lg:w-[60%]"
>
<input
<Input
title="Email"
name="email"
value={form.email}
Expand All @@ -56,7 +76,10 @@ export default function Login() {
onChange={handleChange}
className="input-bar"
/>
<input
<span className="pl-4 text-[#ff0000] text-sm">
{errors.email}
</span>
<Input
title="Password"
name="password"
value={form.password}
Expand All @@ -65,7 +88,9 @@ export default function Login() {
onChange={handleChange}
className="input-bar"
/>

<span className="pl-4 text-[#ff0000] text-sm">
{errors.password}
</span>
<Link
to="#"
className="float-right relative bottom-3 text-green hover:underline"
Expand Down
Loading

0 comments on commit 2ed9bf1

Please sign in to comment.