CODEWITHSUNDEEP
react-nativeformikyup
Anoop K George
Anoop K George

Reputation: 1735

React Native, Errors from Formik-Yup validation is not displaying

I have implemented Yup + Formik in React Native for form handling.

I have title and body input field in form. Validation errors with title is being displayed but no error message related to body is displayed.



const ReviewSchema = yup.object(
  {
    title: yup.string().required().min(2),
  },
  {
    body: yup.string().required().min(3),
  }
);

function Adddata() {
  return (
    <View>
      <Formik
        initialValues={{ title: "", body: "" }}
        validationSchema={ReviewSchema}
        onSubmit={(v) => {
          console.log(v);
        }}
      >
        {(props) => (
          <View>
            <TextInput
              value={props.values.title}
              onChangeText={props.handleChange("title")}
            />
            <Text>{props.errors.title}</Text>
            <TextInput
              value={props.values.body}
              onChangeText={props.handleChange("body")}
            />
            <Text>{props.errors.body}</Text>


          </View>
        )}
      </Formik>

Upvotes: 2

Views: 4419

Answers (3)

Keshav Gera
Keshav Gera

Reputation: 11244

 const initialValues = { email: '', password: '', capcha: '' };

 const validationSchema = Yup.object().shape({
    email: Yup.string()
      .required("please! email?")
      .email("well that's not an email"),
    password: Yup.string()
      .required("please! PASSWORD?")
      .min(4, "pretty sure this will be hacked"),
    capcha: Yup.string()
      .required("please! capcha?")
      .min(5, "pretty sure capcha is correct?")
  });

 return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={(values, actions) => {

        console.log("Submitted: ", JSON.stringify(values));
        // actions.setSubmitting(false);

        setTimeout(() => { actions.setSubmitting(false) }, 1000);


      }}
    >
      {(props) => (

        <View>
          {console.log(" ____retutn ______ " + JSON.stringify(props))}
          <TextInput
            placeholder='Email'
            onChangeText={props.handleChange('email')}
            value={props.values.email}
            name="email" // added this
            type="email"
            setFieldTouched='email'
            placeholderTextColor='grey'
            underlineColorAndroid="grey"
            returnKeyType="next"
            onBlur={() => props.setFieldTouched('email')}
          />

          {
            props.touched.email && props.errors.email && (
              <Text style={{ fontSize: 30, color: 'red' }}>{props.errors.email}</Text>
            )
          }

          <TextInput
            placeholder='Password'
            onChangeText={props.handleChange('password')}
            value={props.values.password}
            name="password" // added this
            type="password"
            returnKeyType="next"
            placeholderTextColor='grey'
            underlineColorAndroid="grey"
          />

          {
            props.touched.password && props.errors.password && (
              <Text style={{ fontSize: 30, color: 'red' }}>{props.errors.password}</Text>
            )
          }
          <TextInput
            placeholder='CAPCHA (1-5)'
            onChangeText={props.handleChange('capcha')}
            value={props.values.rating}
            name="email" // added this
            type="capcha"
            returnKeyType="done"
            placeholderTextColor='grey'
            underlineColorAndroid="grey"
          />
          {
            props.touched.capcha && props.errors.capcha && (
              <Text style={{ fontSize: 30, color: 'red', marginBottom: 20 }}>{props.errors.capcha}</Text>
            )
          }
          
          <Button
            style={{ margin: 20 }}
            title='Submit'
            color='red'
            onPress={props.handleSubmit}
            disabled={props.isSubmitting}
          />
          
        </View>

      )}


    </Formik>
  )

Upvotes: 2

Anoop K George
Anoop K George

Reputation: 1735

I forgot to create one object in Reviewschema, instead created many objects

correct method as below

const ReviewSchema = yup.object({
  title: yup.string().required().min(2),

  body: yup.string().required().min(3),


});

Upvotes: 0

illusi03
illusi03

Reputation: 51

Can u try change object param to shape ?
And insert parameter message in require method ?

For example : 

Yup.object().shape({title: Yup.string().required("Please Insert")});

And if not works, can u try to change

handleChange()

To

setFieldValues(fieldName,value) //Definitely From Formik props

And make some handleSubmit for validate (for check validateOnSubmit, although with validateOnBlur can). Thanks before.

Upvotes: 2

Related Questions