I am creating a form using formik and have completed making the UI but when I want to validate the form using yup I get the error as yup.string().firstname is not a function.(In 'yup.string().firstname("firstname must be 20 characters or less"), 'yup.string().firstname is undefined. Why is it so? Is yup be only used to validate email and password? If so how can we make required for firstname and such stuffs?

My code for Contactus.js is as below.

import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    Keyboard,
    KeyboardAvoidingView,
    TouchableWithoutFeedback,
    ScrollView,
    SafeAreaView
    
} from 'react-native';
import { useFormik } from 'formik';
import * as yup from 'yup'


import Header from '../components/message/Header';
import Colors from '../constants/Colors'
import Button from '../components/button/Button';
import Input from '../components/input/Input';




const loginValidationSchema = yup.object().shape({
    firstname: yup
        .string()
        .firstname("firstname must be 20 characters or less")
        .required("First Name is required")
   })

const ContactUs = () => {
       
    const { handleChange, handleSubmit, values } = useFormik({
        initialValues: {
            email: '',
            message: '',
            phonenumber: '',
            firstname: '',
            lastname: ''
        },
        // validate,
        onSubmit: values => {
            alert("Your message is submitted")
        }
          

})
    
       return (
          <SafeAreaView>
        <KeyboardAvoidingView
        behavior="position"
        keyboardVerticalOffset = {30}

           >
           <TouchableWithoutFeedback onPress= {() => Keyboard.dismiss()}>
        <View >
         <View style={styles.title}>
         <Header
        title={"Send Your Message"}
          style = {styles.title} 
                               />
            </View>
            <View>
            <Input
                placeholder='First Name'
                autoCapitalize='none'
                autoCompleteType='name'
                keyboardType='default'
                autoCorrect = {true}
                onChangeText={handleChange('firstname')}

            />
            <Input
                    placeholder='Last Name'
                   
                autoCapitalize='none'
                autoCompleteType='name'
                keyboardType='default'
                autoCorrect = {true}
                onChangeText={handleChange('lastname')}

            />
            <Input
                    placeholder='Email'
                   
                autoCapitalize='none'
                autoCompleteType='email'
                keyboardType='email-address'
              autoCorrect={true}
              onChangeText={handleChange('email')}
                    
                               
            />
            <Input
                    placeholder= 'Phone Number' 
                   
                autoCapitalize='none'
                autoCompleteType='number'
                keyboardType='phone-pad'
                autoCorrect= {true}
                onChangeText={handleChange('number')}

                               />
                <Input
                   
                    placeholder='Message' 
                    style = {styles.input}
                autoCapitalize='none'
                keyboardType='default'
                autoCorrect = {true}
                onChangeText={handleChange('message')}

                />
            </View>
            <Button onPress= {handleSubmit}>Submit</Button>
            
                   </View>
                   </TouchableWithoutFeedback>
               </KeyboardAvoidingView>
               </SafeAreaView> 
        
  )
}

const styles = StyleSheet.create({
    title: {
        justifyContent: 'center',
        alignItems: 'center'
    },

    button: {
        paddingVertical: 5,
    },

   

    input: {
        paddingVertical: 60,
        textAlign: 'left',
        alignItems: 'flex-start'
       
       
    },

    title: {
        borderBottom: 30,
    }
   
   



    
        
       
   
})

export default ContactUs

I just wanna know if yup is only for email and password how do we validate first name and lastname to make it required to submit.

CodePudding user response：

In Yup, there isn't any function as firstname. For your purpose, you can use max function as follows.

const loginValidationSchema = yup.object().shape({
  firstname: yup.string().max(20, 'firstname must be 20 characters or less').required('First Name is required')
});