Submit button in react form not submitting - reactjs

Question

I am trying to make a registration form using React.js and Formik. My submit button displays correctly but when I try to submit the information by clicking on the submit button nothing happens. Please advise how I can fix this. Thanks in advance.
RegistrationForm.js:
import React from 'react';
import { Formik, Form } from 'formik';
import * as yup from 'yup';
import FormikControl from './FormikControl';
import classes from './Registration.module.css';
function Registrationform() {
const options = [
{ key: 'Email', value: 'emailmoc' },
{ key: 'Telephone', vlaue: 'telephonemoc' }
];
const initialValues = {
email: '',
password: '',
confirmPassword: '',
modeOfContact: '',
phone: ''
};
const validationSchema = yup.object({
email: yup.string().email('Invalid email format').required('Required'),
password: yup.string().required('Required'),
confirmPassword: yup
.string()
.oneOf([yup.ref('password'), ''], 'Passwords must match')
.required('required'),
modeOfContact: yup.string().required('Required'),
phone: yup.string().when('modeOfContact', {
is: 'telephonemoc',
then: yup.string().required('Required')
})
});
const onSubmit = (values) => {
console.log('Form data', values);
};
return (
<div>
<h1>Registration</h1>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
>
{(formik) => {
return (
<Form className={classes.Registrationform}>
<FormikControl
control="input"
type="email"
label="Email"
name="email"
/>
<FormikControl
control="input"
type="password"
label="Password"
name="password"
/>
<FormikControl
control="input"
type="password"
label="Confirm Password"
name="confirmPassword"
/>
<FormikControl
control="input"
type="text"
label="Phone number"
name="phone"
/>
<label>Mode of Contact</label>
<div className="radio">
<label>
<input type="radio" value="Phone" options={options} />
Phone
</label>
</div>
<div className="radio">
<label>
<input type="radio" value="Email" options={options} />
Email
</label>
</div>
<button type="submit" disabled={!formik.isValid}>
Submit
</button>
</Form>
);
}}
</Formik>
</div>
);
}
export default Registrationform;
Registration.module.css:
.Registrationform{
margin:auto;
padding-top: 50px;
width:360px;
}
.Registrationform > label {
font-weight: bold;
display: flex;
margin-bottom: 10px;
font-size: 18px;
}
.Registrationform > input {
margin-bottom: 10px;
font-weight: bold;
display: inline-flex;
margin-right: 20px;
border-radius: 6px;
outline:none;
border: none;
border: 1px solid #1E90FF;
}
.Registrationform > button{
margin-top: 10px;
width: 425px;
height: 35px;
border-radius: 6px;
outline:none;
border: none;
border: 1px solid #1E90FF;
background-color: #1E90FF;
color: white;
font-size: 18px;
}
h1{
margin-top: 50px;
margin-bottom: 0;
padding-bottom: 0;
}
FormikContainer:
import React from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import FormikControl from './FormikControl';
function FormikContainer() {
const initialValues = {
email: '',
password: ''
};
const validationschema = Yup.object({
email: Yup.string().required('Required')
});
const onSubmit = (values) => console.log('Form data', values);
return (
<div>
<Formik
initialValues={initialValues}
validationschema={validationschema}
onSubmit={onSubmit}
>
{(formik) => (
<Form>
<FormikControl
control="input"
type="email"
label="Email"
name="email"
/>
<FormikControl
control="input"
type="password"
label="Password"
name="password"
/>
<button type="submit">Submit</button>
</Form>
)}
</Formik>
</div>
);
}
export default FormikContainer;
FormikControl:
import React from 'react';
function FormikControl({ control, id, label, ...rest }) {
return (
<>
{control === 'input' && <label htmlFor={id}>{label}</label>}
<input id={id} {...rest} />
</>
);
}
export default FormikControl;
App.js:
import React from 'react';
import './App.css';
import FormikContainer from './components/FormikContainer';
import LoginForm from './components/LoginForm';
import Registrationform from './components/RegistrationForm';
function App() {
return (
<div>
<LoginForm />
<Registrationform />
</div>
);
}
export default App;

Answer 1

You need to bind the handleSubmit function of formik to Form onSubmit event listener.
add the onSubmit prop to the Form as below
<Form onSubmit={formik.handleSubmit}>
Or change your button code to (This approach is not mentioned in the formik doc)
<button disabled={!formik.isValid} onClick={formik.handleSubmit}>
Submit
</button>
Here is more on Form API and handleSubmit
Update
With respect to the #malik-hassam's answer:
You are missing the password field in validation schema.
const validationschema = Yup.object({
email: Yup.string().required('Required'),
password: Yup.string(),
});

Answer 2

There is missing password validation.
const LoginSchema = Yup.object().shape({
email: Yup.string()
.email("Email must be a valid email address")
.required("Email is required"),
password: Yup.string().required("Password is required"),
});
try use this.

Answer 3

Pls find your code working demo here link and same as you can do for login component
import React from "react";
import { Formik, Form } from "formik";
import * as Yup from "yup";
function Registrationform() {
const initialValues = {
email: "",
password: "",
confirmPassword: "",
modeOfContact: "email",
phone: ""
};
const validationSchema = Yup.object({
email: Yup.string().email("Invalid email format").required("Required"),
password: Yup.string().required("Password is required"),
confirmPassword: Yup.string().oneOf(
[Yup.ref("password"), null],
"Passwords must match"
),
modeOfContact: Yup.string().required("Required"),
phone: Yup.string().matches(/^[6-9]\d{9}$/, {
message: "Please enter valid number."
})
});
const onSubmit = (values) => {
console.log("Form data", values);
};
function FormikControl({ control, id, label, ...rest }) {
return (
<>
{control === "input" && <label htmlFor={id}>{label}</label>}
<input id={id} {...rest} />
</>
);
}
return (
<div>
<h1>Registration</h1>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
>
{({
handleChange,
errors,
touched,
handleBlur,
values,
isValid,
dirty
}) => (
<Form className="Registrationform">
<FormikControl
control="input"
type="email"
label="Email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
{errors.email && touched.email && errors.email}
<FormikControl
control="input"
type="password"
label="Password"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
/>
{errors.password && touched.password && errors.password}
<FormikControl
control="input"
type="password"
label="Confirm Password"
name="confirmPassword"
onChange={handleChange}
onBlur={handleBlur}
value={values.confirmPassword}
/>
{errors.confirmPassword &&
touched.confirmPassword &&
errors.confirmPassword}
<FormikControl
control="input"
type="text"
label="Phone number"
name="phone"
onChange={handleChange}
onBlur={handleBlur}
value={values.phone}
/>
{errors.phone && touched.phone && errors.phone}
<label>Mode of Contact</label>
<div className="custom-control">
<input
id="email"
type="radio"
value="email"
name="modeOfContact"
onChange={handleChange}
defaultChecked={values.modeOfContact === "email"}
/>
<label className="custom-control-label" htmlFor="email">
email
</label>
</div>
<div className="custom-control">
<input
id="phone"
type="radio"
value="phone"
name="modeOfContact"
onChange={handleChange}
defaultChecked={values.modeOfContact === "phone"}
/>
<label className="custom-control-label" htmlFor="phone">
phone
</label>
</div>
<button type="submit" disabled={!(isValid && dirty)}>
Submit
</button>
</Form>
)}
</Formik>
</div>
);
}
export default Registrationform;

Answer 4

Yes let me add an example of code. you can use this.
enter link description here
import React from "react";
import { Formik } from "formik";
import * as Emailvalidator from "email-validator";
import * as Yup from "yup";
const ValidatedLoginForm = () => (
<>
<Formik
initialValues={{ email: "", password: "" }}
onSubmit={(values, { setSubmitting }) => {
console.log(values);
console;
}}
validationSchema={Yup.object().shape({
email: Yup.string()
.email()
.required("Email Required"),
password: Yup.string()
.required("Password Required")
.min(8, "Password is Too short")
.matches(/(?=.*[0-9])/, "Must Contain Number")
})}
>
{props => {
const {
values,
touched,
errors,
isSubmitting,
handleChange,
handleBlur,
handleSubmit
} = props;
return (
<>
<form onSubmit={handleSubmit}>
<label htmlFor="email">Email</label>
<input
name="email"
type="text"
placeholder="Enter your email"
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
className={errors.email && touched.email && "error"}
/>
{errors.email && touched.email && (
<div className="input feedback">{errors.email}</div>
)}
<label htmlFor="email">Password</label>
<input
name="password"
type="password"
placeholder="Enter your password"
value={values.password}
onChange={handleChange}
onBlur={handleBlur}
className={errors.password && touched.password && "error"}
/>
{errors.password && touched.password && (
<div className="input feedback">{errors.password}</div>
)}
<button type="submit" disabled={isSubmitting}>
Login
</button>
</form>
</>
);
}}
</Formik>
</>
);
export default ValidatedLoginForm;