on blur is not getting called on input method
hi team ,
i am using react metronic 8 demo 1 for my project.
I am facing issue to call custom methods to validate otp by sending otp to user with axios method. I am unable to use onBlur method of formik which is used in metronics.
I am attaching my code, Thankyou in advance. looking for solution
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState, useEffect } from 'react'
import { Navigate } from 'react-router-dom'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import clsx from 'clsx'
import { getUserByToken, register, verifyOtp, sendOtp } from '../core/_requests'
import { Link } from 'react-router-dom'
import { toAbsoluteUrl } from '../../../../_metronic/helpers'
import { PasswordMeterComponent } from '../../../../_metronic/assets/ts/components'
import { useAuth } from '../core/Auth'
import Toast from 'react-bootstrap/Toast'
const phoneRegExp =
/^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/
const initialValues = {
name: '',
email: '',
phoneNumber: '',
otp: '',
password: '',
changepassword: '',
acceptTerms: false,
}
const registrationSchema = Yup.object().shape({
name: Yup.string()
.min(3, 'Minimum 3 symbols')
.max(50, 'Maximum 50 symbols')
.required('First name is required'),
email: Yup.string()
.email('Wrong email format')
.min(3, 'Minimum 3 symbols')
.max(50, 'Maximum 50 symbols')
.required('Email is required'),
phoneNumber: Yup.string()
.matches(phoneRegExp, 'Phone number is not valid')
.min(10, 'Minimum 10 digit')
.max(10, 'Maximum 10 digit')
.required('Phone number is required'),
otp: Yup.string()
.min(4, 'Minimum 4 symbols')
.max(6, 'Maximum 6 symbols')
.required('OTP is required'),
password: Yup.string()
.min(3, 'Minimum 3 symbols')
.max(50, 'Maximum 50 symbols')
.required('Password is required'),
changepassword: Yup.string()
.required('Password confirmation is required')
.when('password', {
is: (val: string) => (val && val.length > 0 ? true : false),
then: Yup.string().oneOf([Yup.ref('password')], "Password and Confirm Password didn't match"),
}),
acceptTerms: Yup.bool().required('You must accept the terms and conditions'),
})
export function Registration() {
const [loading, setLoading] = useState(false)
const { saveAuth, setCurrentUser } = useAuth()
const [startTour, setStartTour] = useState(false)
const formik = useFormik({
initialValues,
validationSchema: registrationSchema,
onSubmit: async (values, { setStatus, setSubmitting }) => {
setLoading(true)
try {
const { data: auth } = await register(
values.email,
values.name,
values.otp,
values.phoneNumber,
values.password,
values.changepassword
)
saveAuth(auth)
const { data: user } = await getUserByToken(auth.api_token, auth)
setCurrentUser(user)
setStartTour(true)
} catch (error) {
console.error(error)
saveAuth(undefined)
setStatus('The registration details is incorrect')
setSubmitting(false)
setLoading(false)
setStartTour(false)
}
},
onBlur: async () => {
setLoading(true)
alert('on blur called')
},
})
useEffect(() => {
PasswordMeterComponent.bootstrap()
}, [])
useEffect(() => {}, [])
useEffect(() => {
if (startTour) {
}
return () => setStartTour(false)
}, [startTour])
return (
{startTour && }
{/* begin::Heading */}
{/* begin::Title */}
Create an Account
{/* end::Title */}
{/* begin::Link */}
Already have an account?
Forgot Password ?
{/* end::Link */}
{/* end::Heading */}
{/* begin::Action */} alt='Logo'
src={toAbsoluteUrl('/media/svg/brand-logos/google-icon.svg')}
className='h-20px me-3'
/>
Sign in with Google
{/* end::Action */}
OR
{formik.status && (
{formik.status}
)}
{/* begin::Form group Firstname */}
Name
{formik.touched.name && formik.errors.name && (
{formik.errors.name}
)}
{/* end::Form group */}
{/* begin::Form group Email */}
Email
{formik.touched.email && formik.errors.email && (
{formik.errors.email}
)}
{/* end::Form group */}
{/* begin::Form group Phone Number */}
Mobile
{formik.touched.phoneNumber && formik.errors.phoneNumber && (
{formik.errors.phoneNumber}
)}
{/* end::Form group */}
OTP
{formik.touched.email && formik.errors.email && (
{formik.errors.otp}
)}
{/* begin::Form group Password */}
Password
{formik.touched.password && formik.errors.password && (
{formik.errors.password}
)}
{/* begin::Meter */}
{/* end::Meter */}
Use 8 or more characters with a mix of letters, numbers & symbols.
{/* end::Form group */}
{/* begin::Form group Confirm password */}
Confirm Password
{formik.touched.changepassword && formik.errors.changepassword && (
{formik.errors.changepassword}
)}
{/* end::Form group */}
{/* begin::Form group */}
I Agree the{' '}
terms and conditions
.
{formik.touched.acceptTerms && formik.errors.acceptTerms && (
{formik.errors.acceptTerms}
)}
{/* end::Form group */}
{/* begin::Form group */}
{!loading && Submit}
{loading && (
Please wait...{' '}
)}
Cancel
{/* end::Form group */}
)
}
Replies (1)
Hi,
Thank you for your message, your case is related to Formik, not to Metronic.
Regards,
Keenthemes support