CODEWITHSUNDEEP
htmlreactjsinputformik
Muhammad Mubashirullah Durrani
Muhammad Mubashirullah Durrani

Reputation: 1145

Formik Field type number min and max attribute

                  <Field
                    className="col ml-1 pl-1 pr-0 form-control"
                    type="number"
                    min="0"
                    max="100"
                    id={`itemsAndServices[${index}].percentage`}
                    name={`itemsAndServices[${index}].percentage`}
                  />

This restraint of min and max doesn't seem to work. Is this something that is supported or do I have to use the original input

Upvotes: 1

Views: 3886

Answers (2)

Justin
Justin

Reputation: 115

Instead of max use maxLength. If you want to enforce a minimum length you'll need to use something like Yup, however, as the other person said.

                  <Field
                    className="col ml-1 pl-1 pr-0 form-control"
                    type="number"
                    maxLength="100"
                    id={`itemsAndServices[${index}].percentage`}
                    name={`itemsAndServices[${index}].percentage`}
                  />

Upvotes: 0

bnays mhz
bnays mhz

Reputation: 503

You could use Yup for validation in Formik. Here is the example:

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  lastName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  email: Yup.string().email('Invalid email').required('Required'),
});

export const ValidationSchemaExample = () => (
  <div>
    <h1>Signup</h1>
    <Formik
      initialValues={{
        firstName: '',
        lastName: '',
        email: '',
      }}
   validationSchema={SignupSchema}
   onSubmit={values => {
     // same shape as initial values
     console.log(values);
   }}
 >
   {({ errors, touched }) => (
     <Form>
       <Field name="firstName" />
       {errors.firstName && touched.firstName ? (
         <div>{errors.firstName}</div>
       ) : null}
       <Field name="lastName" />
       {errors.lastName && touched.lastName ? (
         <div>{errors.lastName}</div>
       ) : null}
       <Field name="email" type="email" />
       {errors.email && touched.email ? <div>{errors.email}</div> : null}
       <button type="submit">Submit</button>
     </Form>
   )}
 </Formik>
</div>
);

You could also use validate prop of the Field component Refer to the docs.

Upvotes: 0

Related Questions