Let's use ant design's Form
component to create interactive form with validation.
// signup.js
import { useState, useEffect } from "react";
import useCurrentTheme from "../hooks/useCurrentTheme";
import { Form, Input, Button, Checkbox } from "antd";
import { MailOutlined, LockOutlined } from "@ant-design/icons";
import { Row, Col, Typography } from "antd";
const { Title } = Typography;
const SignUp = () => {
const onFinish = (values) => {
console.log("Success:", values);
};
return (
<Row>
<Col span={12} offset={6} style={{ paddingTop: "10%" }}>
<Title>Sign Up</Title>
<Form initialValues={{ email: "" }} onFinish={onFinish}>
<Form.Item
name="email"
rules={[
{
type: "email",
message: "The input is not valid E-mail!",
},
{
required: true,
message: "Please input your E-mail!",
},
]}
hasFeedback
>
<Input prefix={<MailOutlined />} placeholder="Email" />
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: "Please input your password!",
min: 6,
max: 24,
},
]}
hasFeedback
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item
name="confirm"
dependencies={["password"]}
hasFeedback
placeholder="Confirm Password"
rules={[
{
required: true,
message: "Please confirm your password!",
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(
new Error(
"The two passwords that you entered do not match!"
)
);
},
}),
]}
>
<Input.Password prefix={<LockOutlined />} />
</Form.Item>
<Form.Item>
<a href="">Forgot password</a>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Log in
</Button>
<br /> Or <a href="">Register now!</a>
</Form.Item>
</Form>
</Col>
</Row>
);
};
export default SignUp;