UseField() with validate gets error

[RoosterH]

I am following the Doc to create a useField() https://formik.org/docs/api/useField.

Code snippet:

const CreditCardField = ({ label, ...props }) => {
	const [field, meta, helpers] = useField(props);
	return (
		<>
			<label>
				{label}
				<input {...field} {...props} />
			</label>
			{meta.touched && meta.error ? (
				<div className="event-form__field-creditcard-error">
					{meta.error}
				</div>
			) : null}
		</>
	);
};

{({
	values,
	errors,
	isSubmitting,
	isValid,
	dirty,
	setFieldValue,
	submitted,
	touched,
	handleBlur,
	handleChange
}) => (
	<Form className="event-form-container">
         ....
         <CreditCardField
		name="CreditCardField"
		type="password"
		label="Credit Card Field"
		values={values}
		validate={validateCreditCard}
		onBlur={event => {
		     handleBlur(event);
		     setOKLeavePage(false);
		}}
		className="event-form__field-creditcard-inline"
	/>

Field successfully shows up with credit card number masked. However, I got an error "Warning: Invalid value for prop validate on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. "

According to this Doc, https://formik.org/docs/api/useField#fieldhookconfigvalue. "validate" is part of FieldHookConfig just like "name" and "type". Why doesn't it work?

[RoosterH]

Strangely, I replaced with from Cleave.js and the error disappears now.

const CreditCardField = ({ label, ...props }) => {
		const [field, meta, helpers] = useField(props);
		return (
			<>
				<Cleave
					{...field}
					placeholder={props.placeholder}
					options={{ creditCard: true }}
					type={props.type}
					className={props.className}
				/>
				{meta.touched && meta.error ? (
					<div className="event-form__field-creditcard-error">
						{meta.error}
					</div>
				) : null}
			</>
		);
	};

Still would like to understand why it didn't work for ? I thought Cleve.js is just a wrapper of , essentially they are the same?

[johnrom]

@RoosterH the warning is actually saying that there is no validate prop on the HTML element input. You can fix it by doing:

// pull validate out of props passed to `input`
const CreditCardField = ({ label, validate, ...props }) => {
  // and add it back to `useField`
  const [field, meta, helpers] = useField({ ...props, validate });

  return <input {...field} {...props} />
};

[RoosterH]

@johnrom
I did try that before my post but in that case how do I get validate to work?

[johnrom]

adding your validate prop to useField as I did above should cause it to trigger during Field-level validations in Formik. input doesn't have a validate prop (or maybe it's a boolean to tell browsers whether to use browser validation), it's actually part of Formik's <Field /> component