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.

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

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.

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

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.

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

Password and confirm password validation example

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

import React from 'react';
import { StyleSheet, ScrollView, View, Text, TouchableOpacity, Image, TextInput, Button} from 'react-native';

export default class ChangePasswordScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            password: "",               // to store password
            passwordErrorMessage: "",         // password error message
            confirmPassword: "",               // to store password
            confirmPasswordErrorMessage: "",         // password error message
            loading: false,             // manage loader
        }
    }
    /**
     * authenticate user
     */
    formValidation = async () => {
        this.setState({ loading: true })
        let errorFlag = false;
        
        // input validation
        if (this.state.password.length == 0) {
          errorFlag = true;
          this.setState({ passwordErrorMessage: "Password is required feild"});
        } else if (this.state.password.length < 8 ||  this.state.password.length > 20) {
          errorFlag = true;
          this.setState({ passwordErrorMessage: "Password should be min 8 char and max 20 char"});
        } else if (this.state.password !==  this.state.confirmPassword ) {
          errorFlag = true;
          this.setState({ passwordErrorMessage: "Passwoad and confirm password should be same."});
        }
        
        if (this.state.confirmPassword.length == 0) {
          errorFlag = true;
          this.setState({ confirmPasswordErrorMessage: "Confirm Password is required feild"});
        } else if (this.state.confirmPassword.length < 8 ||  this.state.confirmPassword.length > 20) {
          errorFlag = true;
          this.setState({ confirmPasswordErrorMessage: "Password should be min 8 char and max 20 char"});
        }
       
        if (errorFlag) {
            console.log("errorFlag");
            
            /** Call Your API */
        } else {
            this.setState({ loading: false });
        }
    }
    render() {
        return (
            <View>
                <ScrollView>
                    <View style={styles.LoginLayout}>
                        <View style={styles.LogoLayout}>
                            <Text>{"Change Password"}</Text>
                        </View>
                        <View style={styles.inputLayout}>
                            <TextInput
                                placeholder="Password"
                                value={this.state.password}
                                secureTextEntry={true}
                                style={styles.input}
                                onChangeText={password => this.setState({password})}
                            />
                            {this.state.passwordErrorMessage.length > 0 && <Text style={styles.textDanger}>{this.state.passwordErrorMessage}</Text>}
                        </View>
                        <View style={styles.inputLayout}>
                            <TextInput
                                placeholder="Confirm Password"
                                value={this.state.password}
                                secureTextEntry={true}
                                style={styles.input}
                                onChangeText={password => this.setState({password})}
                            />
                            {this.state.confirmPasswordErrorMessage.length > 0 && <Text style={styles.textDanger}>{this.state.confirmPasswordErrorMessage}</Text>}
                        </View>
                        <View style={styles.inputLayout}>
                            <Button  onPress={() => this.formValidation()} title="SUBMIT"
 />
                        </View>
                    </View>
                </ScrollView>
                {/* Show Your Loader */}
                {/* {
                    this.state.loading && <Loader />
                } */}
            </View>
        )
    }
}
const styles = StyleSheet.create({
    LoginLayout: {
        flex: 1,
        padding: 20
    },
    LogoLayout: {
        alignItems: "center",
        padding: 20
    },
    inputLayout: {
        paddingBottom: 20,
    },
    input: {
        borderWidth: 1
    },
    textDanger: {
        color: "#dc3545"
    }
});

Passwoad validation output

React Native, password, confirm password, validation, Example

Thanks for reading…