form validation react native

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"

    }

});

Comments

Post a Comment

Popular posts from this blog

Simple Redux

 Create Redux Folder Create Reducers Folder. -->. create index.php import { createSlice } from '@reduxjs/toolkit' const initialState = { userToken : { access_token : '' }, userDes : [{ token : "QpwL5tke4Pnpja7X4" , disclaimer : 'sdsd' }], loading : true , error : null } export const eveReducer = createSlice ({ initialState , name : 'eveReducer' , reducers : { AuthToken : ( state = initialState , action ) => { state . userToken = action . payload }, UserDisclaimer : ( state = initialState , action ) => { state . userDes = action . payload }, logout : ( state = initialState , action ) => { state . userToken = {}, state . userData = {} }, }, }) export const { AuthToken , UserDisclaimer , logout } = eveReducer . actions export default eveReducer . reducer Create Store Folder. -...
Read more

Add Axios Interceptor in Services where Api is called

 Create Services folder in src Create Api Folder and create index.js import { url } from "../BaseURL" ; import axiosApiInstance from "../Interceptor" ; const outGetRegRegbasic = async ( data ) => {   return await axiosApiInstance . post ( `${ url }api/his7/reg/websrv/outGetRegRegbasic` , data ) } export const _services = {   outGetRegRegbasic , }; Create url Folder  and create index.js export const url = 'http://35.234.63.118:30000/' Create Interceptor folder  and create index.js import axios from 'axios' const axiosApiInstance = axios . create ({}); // Request interceptor for API calls axiosApiInstance . interceptors . request . use (     async config => {         config . headers = {             'Access-Control-Allow-Origin' : '*' ,             // 'Authorization': `Bearer ${store.getState()?.counter?.token}`,       ...
Read more

React Interview Questions

Replace array value in javascript var users = [ { id : 1 , firstname : 'John' , lastname : 'Ken' }, { id : 2 , firstname : 'Robin' , lastname : 'Hood' }, { id : 3 , firstname : 'William' , lastname : 'Cook' } ]; var editedUser = { id : 2 , firstname : 'Michael' , lastname : 'Angelo' }; users = users. map ( u => u. id !== editedUser. id ? u : editedUser); console . log ( 'users -> ' , users); Remove array value in javascript let value = 3 let arr = [ 1 , 2 , 3 , 4 , 5 , 3 ] arr = arr. filter ( item => item !== value) console . log (arr) // [ 1, 2, 4, 5 ] Hooks in react useState, useEffect, useRef, useMemo When to use a Class Component over a Function Component? If the component needs state or lifecycle methods then use class component otherwise use function component.  What is Middleware? arrow function vs normal function ? What is the use of super(props) ? So, the simple answer to thi...
Read more