user registrationform using reactjs
user registrationform using reactjs
import "./App.css";
firstName: "",
lastName: "",
email: ""
});
event.preventDefault();
setValues((values) => ({
...values,
[name]: value
}));
};
e.preventDefault();
if (values.firstName && values.lastName && values.email) {
setValid(true);
setSubmitted(true);
};
return (
<div className="form-container">
<div className="success-message">
<h3>
{" "}
</h3>
</div>
)}
{!valid && (
<input
class="form-field"
type="text"
placeholder="First Name"
name="firstName"
value={values.firstName}
onChange={handleInputChange}
/>
)}
{submitted && !values.firstName && (
)}
{!valid && (
<input
class="form-field"
type="text"
placeholder="Last Name"
name="lastName"
value={values.lastName}
onChange={handleInputChange}
/>
)}
)}
{!valid && (
<input
class="form-field"
type="email"
placeholder="Email"
name="email"
value={values.email}
onChange={handleInputChange}
/>
)}
{submitted && !values.email && (
)}
{!valid && (
Register
</button>
)}
</form>
</div>
);
Index.js file
App.css file
body {
background: #76b852;
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.form-container {
width: 360px;
background-color: white;
margin: auto;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
padding: 10px;
}
.register-form {
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 10px;
}
.success-message {
font-family: "Roboto", sans-serif;
background-color: #3f89f8;
padding: 15px;
color: white;
text-align: center;
}
.form-field {
margin: 10px 0 10px 0;
padding: 15px;
font-size: 16px;
border: 0;
font-family: "Roboto", sans-serif;
}
span {
font-family: "Roboto", sans-serif;
font-size: 14px;
color: red;
margin-bottom: 15px;
}
input {
background: #f2f2f2;
}
.error {
border-style: solid;
border: 2px solid #ffa4a4;
}
button {
background: #4caf50;
color: white;
cursor: pointer;
}
button:disabled {
cursor: default;
}