100 lines
3.5 KiB
JavaScript
100 lines
3.5 KiB
JavaScript
import React, { useState } from "react";
|
|
import validator from "validator";
|
|
import { toast } from "react-toastify";
|
|
|
|
const Form = () => {
|
|
const [firstName, setFirstName] = useState("");
|
|
const [lastName, setLastName] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [emailValid, setEmailValid] = useState(true);
|
|
|
|
const changeFirstName = (e) => {
|
|
console.log(` before ..${firstName}`);
|
|
setFirstName(e.target.value);
|
|
console.log(` after ..${firstName}`);
|
|
}
|
|
|
|
const changeLastName = (e) => {
|
|
console.log(` before ..${lastName}`);
|
|
setLastName(e.target.value);
|
|
console.log(` after ..${lastName}`);
|
|
}
|
|
|
|
const changeEmail = (e) => {
|
|
setEmail(e.target.value);
|
|
setEmailValid(validator.isEmail(e.target.value));
|
|
console.log(validator.isEmail(e.target.value));
|
|
}
|
|
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
console.log(e.currentTarget);
|
|
const data = new FormData(e.currentTarget);
|
|
const entries = Object.fromEntries(data);
|
|
console.log(entries);
|
|
setFirstName("");
|
|
setLastName("");
|
|
setEmail("");
|
|
setEmailValid(true);
|
|
toast.success("Form has been submitted successfully!");
|
|
};
|
|
|
|
return (
|
|
<div className="formContainer">
|
|
<h2>Subscribe for Newsletter</h2>
|
|
<form onSubmit={handleSubmit} className="newsletterForm">
|
|
<div className="formGroup">
|
|
<label htmlFor="firstName">First Name</label>
|
|
<input
|
|
type="text"
|
|
id="firstName"
|
|
name="firstName"
|
|
value={firstName}
|
|
onChange={changeFirstName}
|
|
required
|
|
/>
|
|
{firstName && (
|
|
<small className="charCount">Number of Characters = {firstName.length}</small>
|
|
)}
|
|
</div>
|
|
<div className="formGroup">
|
|
<label htmlFor="lastName">Last Name</label>
|
|
<input
|
|
type="text"
|
|
id="lastName"
|
|
name="lastName"
|
|
value={lastName}
|
|
onChange={changeLastName}
|
|
required
|
|
/>
|
|
{lastName && (
|
|
<small className="charCount">Number of Characters = {lastName.length}</small>
|
|
)}
|
|
</div>
|
|
<div className="formGroup">
|
|
<label htmlFor="email">Email</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value={email}
|
|
onChange={changeEmail}
|
|
required
|
|
/>
|
|
{email ? (
|
|
emailValid ? (
|
|
<small className="charCount" style={{ color: 'red' }}>Email is Valid.</small>
|
|
) : (
|
|
<small className="charCount" style={{ color: 'red' }}>Email is Not Valid..</small>
|
|
)
|
|
) : null}
|
|
</div>
|
|
<button type="submit" className="subscribeButton">Subscribe</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Form;
|