Formik doesn't log the values on the console

Question

I want to create a form by using Formik library but I can't get the values in console like name and password fields when using yup for the data validation. Unfortunately, I can't figure it out what causing this issue.

This is what I've got so far:

FYI: KerrorMessage is my custom Error

import React from "react";
import { Formik, Form, Field } from "formik";
import * as yup from "yup";
import KerrorMessage from "./KerrorMessage";

const validationSchema = yup.object({
  name: yup.string().required("Please Enter your name"),
  password: yup.string().required("password is required"),
  mydesc: yup.string().required("Please Enter the description"),
  email: yup.string().required("Please Enter your email"),
  title: yup.string().required("Please Enter the Title"),
  gender: yup.string().required("Gender is required"),
  checked: yup.string().required("Select your Hobbie"),
});
function YoutubeForm() {
  return (
    <div>
      <Formik
        validationSchema={validationSchema}
        initialValues={{
          name: "",
          password: "",
          mydesc: "",
          email: "",
          title: "",
          gender: "",
          checked: "",
          checkBox: "",
        }}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {({ values }) => (
          <div>
            <h1>FORM NO 2</h1>
            <Form className="form">
              <div className="fitem">
                <label htmlFor="name">NAME</label>
                <Field
                  typr="text"
                  id="name"
                  name="name"
                  placeholder="Enter your name"
                />
                <KerrorMessage name="name" />
              </div>
              <div className="fitem">
                <label htmlFor="password">PASSWORD</label>
                <Field
                  type="password"
                  id="password"
                  name="password"
                  placeholder="Enter your password"
                />
                <KerrorMessage name="password" />
              </div>
              <div className="fitem">
                <label htmlFor="mydesc">DESCRIPTION</label>
                <Field
                  type="text"
                  id="mydesc"
                  name="mydesc"
                  placeholder="Enter the Description"
                />
                <KerrorMessage name="mydesc" />
              </div>
              <div className="fitem">
                <label htmlFor="email">EMAIL</label>
                <Field
                  type="email"
                  id="email"
                  name="email"
                  placeholder="Enter your Email"
                />
                <KerrorMessage name="email" />
              </div>
              <div className="fitem">
                <label htmlFor="title">TITLE</label>
                <Field
                  type="text"
                  id="title"
                  name="title"
                  placeholder="Enter the Title"
                />
                <KerrorMessage name="title" />
              </div>

              <div className="radio">
                <label>Gender:</label>
                <label>Male:</label>
                <Field name="gender" value="male" id="male" type="radio" />
                <label>Female:</label>
                <Field name="gender" value="female" id="female" type="radio" />
                <KerrorMessage name="gender" />

                <label>HOBBIES:</label>
                <label>
                  <Field type="checkbox" name="checked" value="Cycling" />
                  Cycling
                </label>
                <label>
                  <Field type="checkbox" name="checked" value="Reading" />
                  Reading
                </label>
                <label>
                  <Field type="checkbox" name="checked" value="Dancing" />
                  Dancing
                </label>
                <label>
                  <Field type="checkbox" name="checked" value="Travelling" />
                  Travelling
                </label>

                <KerrorMessage name="checked" />
              </div>
              <div className="fitem">
                <label htmlFor="checkBox">
                  I ACCEPT ALL THE TERMS AND CONDITIONS
                </label>
                <Field type="checkbox" id="checkBox" name="checkBox" />
              </div>
              <div className="fitem">
                <button type="submit">Submit</button>
              </div>
            </Form>
          </div>
        )}
      </Formik>
    </div>
  );
}

export default YoutubeForm;

Thank you

Answer 1

Yup schema validation will prevent form submit. Errors are meant to be displayed before sending the form.

onSubmit is called only when the form is valid.