Sunday, October 28, 2018

React Native Check Text Input is Empty or Not in Android

This tutorial explains how to check TextInput Component entered value in react native application and also we have added validation checkpoint in TextInput Component to check whether input value is empty or not. In our previous tutorial we have discussed about TextInput component and their uses in react native application. If you still not remember, then check out the below link for the reference.
  1. React Native Set TextInput Type Style Password Example
  2. Retrieve TextInput entered value on Button Click onPress in React Native
  3. React Native Set Default PlaceHolder Text in TextInput Component
  4. Add Rounded Corner Borders to TextInput Component in React Native


In this example example we will validate TextInput component entered value in react native application.We will add below checkpoints in TextInput Component.
  • When user clicks on submit button without entering the value in TextInput, then will display error message "Please enter the details to proceed" in alert dialog box.
  • When user clicks on submit button by entering the value in TextInput, then will not display any error message, but when user set the value to empty, then will display error message "Please enter the details to proceed" just below the InputText component.
          When user entered valid value in TextInput field.           

          When user set the value to empty in TextInput field.

React Native Check TextInput is Empty or Not :

Lets follow the below steps to check TextInput is empty or not in React Native.




Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TextInput, Button, Alert } from 'react-native';

Step-4 : First Create the App class inside the app.js file, Then Create constructor in your App class and call the super method inside constructor. Now using this.state we are defining the TextInputValue, ErrorStatus as state. This state object  is used to store the entered text value from the TextInput component and also stores the error message status in Boolean form inside the  state object.
TextInputValue :  Storing the TextInput field value in the state.
ErrorStatus  : Storing the error status indicator in the state.
constructor(props) {
  super(props)
  this.state = {
    TextInputValue: '',
    ErrorStatus : true,
   }
}

Step-5: create onEnterText function inside the app class. This function helps to update the text input fields value and error status to state object.
onEnterText = (TextInputValue) =>{
   if(TextInputValue.trim() != 0){
    this.setState({TextInputValue : TextInputValue, ErrorStatus : true}) ;
  }else{
      this.setState({TextInputValue : TextInputValue, ErrorStatus : false}) ;
  }
}

Step-6: create buttonClickListener function that helps to validate the  text input field. When user clicks on submit button without entering any value, then it will display error message in alert dialog box, else it will not display any error message.
buttonClickListener = () =>{
      const { TextInputValue }  = this.state ;
      if (TextInputValue == ""){
         Alert.alert("Please enter the text to proceed");
      }
  }

Step-7: Implement render method and place below layout design inside the render block. 
  • When user clicks on submit button without entering the value in TextInput, then will display error message "Please enter the details to proceed" in alert dialog box.
  • When user clicks on submit button by entering the value in TextInput, then will not display any error message, but when user set the value to empty, then will display error message "Please enter the details to proceed" just below the InputText component.
render() {
    return (
        <View style={styles.container}>

          <TextInput
            style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
            // Adding hint in TextInput using Placeholder option.
            placeholder=" Enter Your User Name"
            //set the value in state.
            onChangeText={TextInputValue => this.onEnterText(TextInputValue)}
            // Making the Under line Transparent.
            underlineColorAndroid="transparent"
          />


          { this.state.ErrorStatus == false ? (
             <Text style={styles.errorMessage}>
               * Please enter the text to proceed.
             </Text>
            ) : null  }

          <View style={[{ width: "93%", margin: 15, backgroundColor: "red" }]}>
            <Button
            onPress={this.buttonClickListener}
            title="Submit"
            color="#00B0FF"
            />
          </View>

        </View>
      );
  }

Step-8 : Apply the below style sheet design.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  errorMessage: {
    fontSize: 20,
    color:"red",
    marginLeft:-80,
  }
});


Complete Source Code for App.js 

Lets see the complete source code that helps to validate the text input field value and then after it will display error or success message accordingly in react native application.
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TextInput, Button, Alert } from 'react-native';


export default class App extends Component {

constructor(props) {
  super(props)
  this.state = {
    TextInputValue: '',
    ErrorStatus : true,
   }
}

onEnterText = (TextInputValue) =>{
   if(TextInputValue.trim() != 0){
    this.setState({TextInputValue : TextInputValue, ErrorStatus : true}) ;
  }else{
      this.setState({TextInputValue : TextInputValue, ErrorStatus : false}) ;
  }
}

buttonClickListener = () =>{
      const { TextInputValue }  = this.state ;
      if (TextInputValue == ""){
         Alert.alert("Please enter the text to proceed");
      }
  }

  render() {
    return (
        <View style={styles.container}>

          <TextInput
            style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
            // Adding hint in TextInput using Placeholder option.
            placeholder=" Enter Your User Name"
            //set the value in state.
            onChangeText={TextInputValue => this.onEnterText(TextInputValue)}
            // Making the Under line Transparent.
            underlineColorAndroid="transparent"
          />


          { this.state.ErrorStatus == false ? (
             <Text style={styles.errorMessage}>
               * Please enter the text to proceed.
             </Text>
            ) : null  }

          <View style={[{ width: "93%", margin: 15, backgroundColor: "red" }]}>
            <Button
            onPress={this.buttonClickListener}
            title="Submit"
            color="#00B0FF"
            />
          </View>

        </View>
      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  errorMessage: {
    fontSize: 20,
    color:"red",
    marginLeft:-80,
  }
});

Screenshot :


React Native Check Text Input is Empty or Not in Android

React Native Check Text Input is Empty or Not in Android

React Native Check Text Input is Empty or Not in Android

React Native Check Text Input is Empty or Not in Android

This is about React Native Check Text Input is Empty or Not in AndroidThank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

No comments:

Post a Comment