Build a React.js HTML Form Validation Using Formik and Yup to Show Error Messages on Form Submit

App.jsx

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import { Container, Row, Col, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css"

const App = () => {
  // Initial values for the form fields
  const initialValues = {
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  };

  // Validation schema using Yup
  const validationSchema = Yup.object({
    name: Yup.string()
      .required("Name is required")
      .min(2, "Name must be at least 2 characters long"),
    email: Yup.string()
      .email("Invalid email address")
      .required("Email is required"),
    password: Yup.string()
      .required("Password is required")
      .min(6, "Password must be at least 6 characters"),
    confirmPassword: Yup.string()
      .oneOf([Yup.ref("password"), null], "Passwords must match")
      .required("Confirm Password is required"),
  });

  // Handle form submission
  const onSubmit = (values, { resetForm }) => {
    alert(JSON.stringify(values, null, 2));
    resetForm(); // Reset the form after submission
  };

  return (
    <Container className="my-4">
      <h1 className="text-center">React Form Validation with Formik and Yup</h1>
      <Row className="justify-content-center">
        <Col md={6}>
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={onSubmit}
          >
            {({ isSubmitting }) => (
              <Form>
                {/* Name Field */}
                <div className="mb-3">
                  <label htmlFor="name" className="form-label">
                    Name
                  </label>
                  <Field
                    type="text"
                    id="name"
                    name="name"
                    className="form-control"
                  />
                  <ErrorMessage
                    name="name"
                    component="div"
                    className="text-danger"
                  />
                </div>

                {/* Email Field */}
                <div className="mb-3">
                  <label htmlFor="email" className="form-label">
                    Email
                  </label>
                  <Field
                    type="email"
                    id="email"
                    name="email"
                    className="form-control"
                  />
                  <ErrorMessage
                    name="email"
                    component="div"
                    className="text-danger"
                  />
                </div>

                {/* Password Field */}
                <div className="mb-3">
                  <label htmlFor="password" className="form-label">
                    Password
                  </label>
                  <Field
                    type="password"
                    id="password"
                    name="password"
                    className="form-control"
                  />
                  <ErrorMessage
                    name="password"
                    component="div"
                    className="text-danger"
                  />
                </div>

                {/* Confirm Password Field */}
                <div className="mb-3">
                  <label htmlFor="confirmPassword" className="form-label">
                    Confirm Password
                  </label>
                  <Field
                    type="password"
                    id="confirmPassword"
                    name="confirmPassword"
                    className="form-control"
                  />
                  <ErrorMessage
                    name="confirmPassword"
                    component="div"
                    className="text-danger"
                  />
                </div>

                {/* Submit Button */}
                <div className="text-center">
                  <Button
                    type="submit"
                    variant="primary"
                    disabled={isSubmitting}
                  >
                    Submit
                  </Button>
                </div>
              </Form>
            )}
          </Formik>
        </Col>
      </Row>
    </Container>
  );
};

export default App;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

import React from "react";

import { Formik, Form, Field, ErrorMessage } from "formik";

import * as Yup from "yup";

import { Container, Row, Col, Button } from "react-bootstrap";

import "bootstrap/dist/css/bootstrap.min.css"

const App = () => {

// Initial values for the form fields

const initialValues = {

name: "",

email: "",

password: "",

confirmPassword: "",

};

// Validation schema using Yup

const validationSchema = Yup.object({

name: Yup.string()

.required("Name is required")

.min(2, "Name must be at least 2 characters long"),

email: Yup.string()

.email("Invalid email address")

.required("Email is required"),

password: Yup.string()

.required("Password is required")

.min(6, "Password must be at least 6 characters"),

confirmPassword: Yup.string()

.oneOf([Yup.ref("password"), null], "Passwords must match")

.required("Confirm Password is required"),

});

// Handle form submission

const onSubmit = (values, { resetForm }) => {

alert(JSON.stringify(values, null, 2));

resetForm(); // Reset the form after submission

};

return (

<h1 className="text-center">React Form Validation with Formik and Yup</h1>

<Formik

initialValues={initialValues}

validationSchema={validationSchema}

onSubmit={onSubmit}

{({ isSubmitting }) => (

<Form>

{/* Name Field */}

Name

</label>

<Field

type="text"

id="name"

name="name"

className="form-control"

<ErrorMessage

name="name"

component="div"

className="text-danger"

</div>

{/* Email Field */}

</label>

<Field

type="email"

id="email"

name="email"

className="form-control"

<ErrorMessage

name="email"

component="div"

className="text-danger"

</div>

{/* Password Field */}

Password

</label>

<Field

type="password"

id="password"

name="password"

className="form-control"

<ErrorMessage

name="password"

component="div"

className="text-danger"

</div>

{/* Confirm Password Field */}

Confirm Password

</label>

<Field

type="password"

id="confirmPassword"

name="confirmPassword"

className="form-control"

<ErrorMessage

name="confirmPassword"

component="div"

className="text-danger"

</div>

{/* Submit Button */}

<Button

type="submit"

variant="primary"

disabled={isSubmitting}

Submit

</Button>

</div>

</Form>

)}

</Formik>

</Col>

</Row>

</Container>

);

};

export default App;

Build a React.js HTML Form Validation Using Formik and Yup to Show Error Messages on Form Submit

Comments

Leave a Reply Cancel reply

Archives