Navigate back to the homepage

How to check password and confirm password in react native

Infinitbility
React Native
September 12th, 2021 · 1 min read
How to check password and confirm password in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This article will help you to check the validation of textinput field password and confirm the password in react native, where we can put the required field, min length, and max length, and password and confirm password match validation before sending data to API.

Today, We understand the logic implementation of the required field, min length, and max length, and password and confirm password match validation with a small code spiniest, and we will create a complete example of password and confirm password validation.

Let’s start today’s tutorial How to check the password and confirm password in react native.

Validation example

Now we are going to implement three types of validation.

  1. Password and Confirm Password Required Validation.
  2. Password and Confirm Password Minimum length and maximum length Validation.
  3. Password and Confirm Password Value match Validation.

Required Validation

To show Required Validation, we can check the length of the text state and if it is equal to zero then we will show Required Feild Validation.

1let errorFlag = false;
2// input validation
3if (this.state.password.length == 0) {
4 errorFlag = true;
5 this.setState({ passwordErrorMessage: "Password is required feild"});
6}

Minimum length and maximum length validation

To show minimum length and maximum length validation, same as Required Validation we check text length, and if the length is less than Min Length or more than Max length then we show an error message.

1let errorFlag = false;
2// input validation
3if (this.state.password.length < 8 || this.state.password.length > 20) {
4 errorFlag = true;
5 this.setState({ passwordErrorMessage: "Password should be min 8 char and max 20 char"});
6}

Value match Validation

To show value match validation, we have to compare the text of Password state and Confirm password state and if not same then we will show an error message.

1let errorFlag = false;
2// input validation
3if (this.state.password !== this.state.confirmPassword ) {
4 errorFlag = true;
5 this.setState({ passwordErrorMessage: "Passwoad and confirm password should be same."});
6}

Password and confirm password validation example

Now, we are going to implement all the above password validation in the Change password screen.

1import React from 'react';
2import { StyleSheet, ScrollView, View, Text, TouchableOpacity, Image, TextInput, Button} from 'react-native';
3
4export default class ChangePasswordScreen extends React.Component {
5 constructor(props) {
6 super(props);
7 this.state = {
8 password: "", // to store password
9 passwordErrorMessage: "", // password error message
10 confirmPassword: "", // to store password
11 confirmPasswordErrorMessage: "", // password error message
12 loading: false, // manage loader
13 }
14 }
15 /**
16 * authenticate user
17 */
18 formValidation = async () => {
19 this.setState({ loading: true })
20 let errorFlag = false;
21
22 // input validation
23 if (this.state.password.length == 0) {
24 errorFlag = true;
25 this.setState({ passwordErrorMessage: "Password is required feild"});
26 } else if (this.state.password.length < 8 || this.state.password.length > 20) {
27 errorFlag = true;
28 this.setState({ passwordErrorMessage: "Password should be min 8 char and max 20 char"});
29 } else if (this.state.password !== this.state.confirmPassword ) {
30 errorFlag = true;
31 this.setState({ passwordErrorMessage: "Passwoad and confirm password should be same."});
32 }
33
34 if (this.state.confirmPassword.length == 0) {
35 errorFlag = true;
36 this.setState({ confirmPasswordErrorMessage: "Confirm Password is required feild"});
37 } else if (this.state.confirmPassword.length < 8 || this.state.confirmPassword.length > 20) {
38 errorFlag = true;
39 this.setState({ confirmPasswordErrorMessage: "Password should be min 8 char and max 20 char"});
40 }
41
42 if (errorFlag) {
43 console.log("errorFlag");
44
45 /** Call Your API */
46 } else {
47 this.setState({ loading: false });
48 }
49 }
50 render() {
51 return (
52 <View>
53 <ScrollView>
54 <View style={styles.LoginLayout}>
55 <View style={styles.LogoLayout}>
56 <Text>{"Change Password"}</Text>
57 </View>
58 <View style={styles.inputLayout}>
59 <TextInput
60 placeholder="Password"
61 value={this.state.password}
62 secureTextEntry={true}
63 style={styles.input}
64 onChangeText={password => this.setState({password})}
65 />
66 {this.state.passwordErrorMessage.length > 0 && <Text style={styles.textDanger}>{this.state.passwordErrorMessage}</Text>}
67 </View>
68 <View style={styles.inputLayout}>
69 <TextInput
70 placeholder="Confirm Password"
71 value={this.state.password}
72 secureTextEntry={true}
73 style={styles.input}
74 onChangeText={password => this.setState({password})}
75 />
76 {this.state.confirmPasswordErrorMessage.length > 0 && <Text style={styles.textDanger}>{this.state.confirmPasswordErrorMessage}</Text>}
77 </View>
78 <View style={styles.inputLayout}>
79 <Button onPress={() => this.formValidation()} title="SUBMIT"
80 />
81 </View>
82 </View>
83 </ScrollView>
84 {/* Show Your Loader */}
85 {/* {
86 this.state.loading && <Loader />
87 } */}
88 </View>
89 )
90 }
91}
92const styles = StyleSheet.create({
93 LoginLayout: {
94 flex: 1,
95 padding: 20
96 },
97 LogoLayout: {
98 alignItems: "center",
99 padding: 20
100 },
101 inputLayout: {
102 paddingBottom: 20,
103 },
104 input: {
105 borderWidth: 1
106 },
107 textDanger: {
108 color: "#dc3545"
109 }
110});

Passwoad validation output

React Native, password, confirm password, validation, Example

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to check console.log in react native

How to check console.log in react native

React Native console.log example

September 11th, 2021 · 1 min read
How to show suggestion on click in react tag input

How to show suggestion on click in react tag input

React tag input show sugession on onClick

September 10th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]