RegistrationForm

Kool_Cool

Jun 14th, 2024

125

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

JavaScript 2.47 KB | None | 0 0

raw download clone embed print report

//resources\js\Component\UserRegistration\RegistrationForm.jsx
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
import { Card, CardBody, Row, Col, Label, Button } from "reactstrap";
import { useState } from "react";
const RegistrationForm = () => {
const [submitErrors, setSubmitError] = useState(false);
const submitHandler = (values, { resetForm }) => {
resetForm();
setSubmitError(false);
};
const REGISTRATION_INITIAL_VALUES = {
email: "",
password: ""
};
const REGISTRATION_VALIDATION_SCHEMA = Yup.object().shape({
email: Yup.string().email('Invalid email').required('Email is required'),
password: Yup.string().min(8, 'Password must be at least 8 characters').required('Password is required')
});
return (
<>
<Card>
<CardBody class="p-0">
<Formik
initialValues={REGISTRATION_INITIAL_VALUES}
onSubmit={submitHandler}
validationSchema={REGISTRATION_VALIDATION_SCHEMA}
>
{({ errors }) => (
<Form>
<Row className="g-3 custom-input">
<Col md="6" className="position-relative">
<Label>Email</Label>
<Field
name="email"
type="email"
className={`form-control ${submitErrors && `${errors.email ? "is-invalid" : "is-valid"}`}`}
placeholder="[email protected]"
/>
<div className="invalid-tooltip">{errors.email}</div>
</Col>
<Col md="6" className="position-relative">
<Label>Password</Label>
<Field
name="password"
type="password"
className={`form-control ${submitErrors && `${errors.password ? "is-invalid" : "is-valid"}`}`}
placeholder="Enter your password"
/>
<div className="invalid-tooltip">{errors.password}</div>
</Col>
<Col sm="12">
<Button color="primary" type="submit" onClick={() => setSubmitError(true)}>Register</Button>
</Col>
</Row>
</Form>
)}
</Formik>
</CardBody>
</Card>
</>
);
};
export default RegistrationForm;

Add Comment

Please, Sign In to add comment