REACT.JS + FORMIK input field proble,

Question

this is my first ever stack overflow question. I am trying to build a log-in page (making a full stack app with node express mongodb mongoose) and front end being REACT. I am running into an issue where the input field css does not register until I click into the input field and click out. I am using Formik to develop my form. I have two questions essentially: How can I fix this issue and how can I do an API call to my backend server which is running on localhost:3003. Here is the code:

import React from "react";
import "../App.css";
import { Formik } from "formik";
import * as EmailValidator from "email-validator";
import * as Yup from "yup";
const ValidatedLoginForm = () => (
  <Formik
    initialValues={{ email: "", password: "" }}
    onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
        console.log("Logging in", values);
        setSubmitting(false);
      }, 500);
    }}
    validationSchema={Yup.object().shape({
      email: Yup.string()
        .email()
        .required("Required"),
      password: Yup.string()
        .required("No password provided.")
        .min(8, "Password is too short - should be 8 chars minimum.")
        .matches(/(?=.*[0-9])/, "Password must contain a number.")
    })}
  >
    {props => {
      const {
        values,
        touched,
        errors,
        isSubmitting,
        handleChange,
        handleBlur,
        handleSubmit
      } = props;
      return (
        <div className="FormCenter">
          <form onSubmit={handleSubmit} className="FormFields">
            <div className="FormField">
              <label htmlFor="email" className="FormField__Label">
                Email
              </label>
              <input
                name="email"
                type="text"
                placeholder="Enter your email"
                value={values.email}
                onBlur={handleBlur}
                onChange={handleChange}
                className={
                  errors.email && touched.email && "error" && "FormField__Input"
                }
              />
              {errors.email && touched.email && (
                <div className="input-feedback">{errors.email}</div>
              )}
            </div>
            <div className="FormField">
              <label htmlFor="email" className="FormField__Label">
                Password
              </label>
              <input
                name="password"
                type="password"
                placeholder="Enter your password"
                value={values.password}
                onChange={handleChange}
                onBlur={handleBlur}
                className={
                  errors.password &&
                  touched.password &&
                  "error" &&
                  "FormField__Input"
                }
              />
              {errors.password && touched.password && (
                <div className="input-feedback">{errors.password}</div>
              )}
            </div>
            <div className="FormField">
              <button
                type="submit"
                className="FormField__Button mr-20"
                onChange
              >
                Login
              </button>
            </div>
          </form>
        </div>
      );
    }}
  </Formik>
);

export default ValidatedLoginForm;

score 0 · Answer 1 · answered Nov 25 '19 at 11:22

This looks like a normal behaviour to me. The validation in the form will get triggered when ,

when you submit the form
when the field is touched . Becoz of this you are seeing the error message being displayed when you switch between the fields without entering the values .

You should be firing the api call from the onSubmit, were you will get to access all the form values . I would suggest you to use fetch api . https://developer.mozilla.org/en/docs/Web/API/Fetch_API

Just make your onSubmit as a asyn method and fire your api call inside it .

REACT.JS + FORMIK input field proble,

1 Answers1