How to validate in react-native by using formik and yup? - validation

Question

How do i show error messages here by using formik and yup?
Suppose i want to show an error message for Customer name.
How to do this?
import React, { Component } from 'react';
import { Text,Alert, TextInput, View, StyleSheet, KeyboardAvoidingView, ActivityIndicator, TouchableOpacity, Image, Animated, Easing,} from 'react-native';
import { Button } from 'react-native-elements'
import PropTypes from 'prop-types';
import Dimensions from 'Dimensions';
import { Router, Scene, Actions } from 'react-native-router-flux';
import * as Yup from 'yup';
import { Formik } from 'formik';
import eyeImg from '../images/eye_black.png';
const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
I have declared initialValues also.
Please help me.
const initialValues = {
customer_name: "",
mobile: "",
password: "",
repassword: "",
email_address: "",
company_id: "",
profile_image: "",
licence_number: "",
user_status: "Active",
};
Here are my error messages.
const customervalidation = Yup.object().shape({
customer_name: Yup.string().required("Please enter name"),
email_address: Yup.string()
.required("Please enter email address")
.email('Please enter a valid email'),
mobile: Yup.string().required("Please enter mobile"),
password: Yup.string().required("Please enter password"),
repassword: Yup.string().oneOf([Yup.ref('password'), null], 'Passwords must match')
});
export default class Form extends Component {
constructor(props) {
super(props);
this.state = {
customer_name: '',
mobile: '',
password: '',
cpassword: '',
email_address: '',
showPass: true,
showConfPass: true,
press: false,
};
this.showPass = this.showPass.bind(this);
this.showConfPass = this.showConfPass.bind(this);
this._onPress = this._onPress.bind(this);
}
showPass() {
//Alert.alert('Credentials', `${this.state.press}`);
this.state.press === false
? this.setState({showPass: false, press: true})
: this.setState({showPass: true, press: false});
}
showConfPass() {
this.state.press === false
? this.setState({showConfPass: false, press: true})
: this.setState({showConfPass: true, press: false});
}
This is actually my API for sign up section.
onSignup() {
const { customer_name, mobile, password, cpassword, email_address } = this.state;
Alert.alert('Credentials', `${customer_name} + ${mobile} + ${password} + ${cpassword} + ${email_address}`);
fetch('url', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
customer_name: this.state.customer_name,
mobile: this.state.mobile,
email_address: this.state.email_address,
password: this.state.password,
})
}).then((response) => response.json())
.then((responseJson) => {
alert('Success');
}).catch((error) => {
alert('Error');
});
}
_onPress() {
if (this.state.isLoading) return;
this.setState({isLoading: true});
Animated.timing(this.buttonAnimated, {
toValue: 1,
duration: 200,
easing: Easing.linear,
}).start();
setTimeout(() => {
this._onGrow();
}, 2000);
setTimeout(() => {
Actions.forgotpwdScree();
this.setState({isLoading: false});
this.buttonAnimated.setValue(0);
this.growAnimated.setValue(0);
}, 2300);
}
I have added formik here . I want to show error messages during setfieldtouch,onblur and form submit
render() {
return (
<Formik initialValues= {initialValues} validationSchema={customervalidation}>
{({ values, errors, isValid, touched, setFieldTouched, isSubmitting }) => {
return(
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<View style={styles.inputcontainer}>
<Text style={styles.textlabel}>NAME</Text>
<TextInput
value={this.state.customer_name}
onChangeText={(customer_name) => this.setState({ customer_name })}
placeholder={'Name'}
style={styles.input}
/>
</View>
<View style={styles.inputcontainer}>
<Text style={styles.textlabel}>PHONE NUMBER</Text>
<TextInput
value={this.state.mobile}
onChangeText={(mobile) => this.setState({ mobile })}
placeholder={'Mobile Number'}
style={styles.input}
/>
</View>
<View style={styles.inputcontainer}>
<Text style={styles.textlabel}>PASSWORD</Text>
<TextInput
value={this.state.password}
secureTextEntry={this.state.showPass}
onChangeText={(password) => this.setState({ password })}
placeholder={'PASSWORD'}
returnKeyType={'done'}
autoCapitalize={'none'}
autoCorrect={false}
style={styles.input}
/>
</View>
<TouchableOpacity
activeOpacity={0.7}
style={styles.btnEye}
onPress={this.showPass}>
<Image source={eyeImg} style={styles.iconEye} />
</TouchableOpacity>
<View style={styles.inputcontainer}>
<Text style={styles.textlabel}>CONFIRM PASSWORD</Text>
<TextInput
value={this.state.cpassword}
secureTextEntry={this.state.showConfPass}
onChangeText={(cpassword) => this.setState({ cpassword })}
placeholder={'CONFIRM PASSWORD'}
returnKeyType={'done'}
autoCapitalize={'none'}
autoCorrect={false}
style={styles.input}
/>
</View>
<TouchableOpacity
activeOpacity={0.7}
style={styles.btnEye2}
onPress={this.showConfPass}>
<Image source={eyeImg} style={styles.iconEye} />
</TouchableOpacity>
<View style={styles.inputcontainer}>
<Text style={styles.textlabel}>EMAIL ID</Text>
<TextInput
value={this.state.email_address}
onChangeText={(email_address) => this.setState({ email_address })}
placeholder={'Email Address'}
style={styles.input}
/>
</View>
<View style={styles.inputcontainerB}>
<Text style={styles.textR} >I AGREE WITH UP TERMS</Text>
<Button
large
title='SIGN UP'
icon={{name: 'lock', type: 'font-awesome'}}
onPress={this.onSignup.bind(this)}
/>
</View>
</KeyboardAvoidingView>
);
}}
</Formik>
);
}
}

Answer 1

You can use: values, handleSubmit, handleChange, errors, touched, handleBlur, from the render prop in formik component, Formik lib already does the updates to the form values, so there is no need to use state for this, for example, for the customer_name you need to add a Text component to show the error.
<Formik
initialValues={initialValues}
onSubmit={this.onSignup}
validationSchema={customervalidation}
render={({
values,
handleSubmit,
handleChange,
errors,
touched,
handleBlur
}) => (
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<View style={styles.inputcontainer}>
<Text style={styles.textlabel}>NAME</Text>
<TextInput
value={values.customer_name}
onBlur={handleBlur('customer_name')}
onChangeText={handleChange('customer_name')}
placeholder={'Name'}
style={styles.input}
/>
<Text>{touched.customer_name && errors.customer_name}</Text>
</View>
...
<Button
large
title='SIGN UP'
icon={{name: 'lock', type: 'font-awesome'}}
onPress={handleSubmit}
/>
</KeyboardAvoidingView>
)
/>
the handleSubmit prop will pass the function declared in the onSubmit prop to the render, which will send the param values, which in your case will have the updated values declared in initialValues
{
customer_name: "",
mobile: "",
password: "",
repassword: "",
email_address: "",
company_id: "",
profile_image: "",
licence_number: "",
user_status: "Active"
}