Show validation error Message in the form using React Native Expo

Validation error message in Login and Signup Form in React Native

Hello, React Native Developers..!!

When you make a mobile application, you may provide some field from where you took input. Whether it is Signup Form or Login Form, all we do is take input from the users. When the user fills in some wrong input in the form. Then the form must show some validation error message. It makes your application ideal. Because the user can now see the mistakes they are doing. So, let’s see how you add the validation form error message in your application. All you need is a basic understanding of javascript.

Photo by inlytics | LinkedIn Analytics Tool on Unsplash

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

Set-up your Application

Start the project using the command: expo init ValidForm

Complete the installation process

Make a file “FormList.js” inside the “ValidForm” directory.

FormList.js

import React, {useState} from 'react'
import { Text, View, TextInput, Button } from 'react-native';
function FormList() {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [emailError, setEmailError] = useState("")
    const [passwordError, setPasswordError] = useState("")
const handleSubmit = () => {
        var emailValid = false;
        if(email.length == 0){
            setEmailError("Email is required");
        }        
        else if(email.length < 6){
            setEmailError("Email should be minimum 6 characters");
        }      
        else if(email.indexOf(' ') >= 0){        
            setEmailError('Email cannot contain spaces');                          
        }    
        else{
            setEmailError("")
            emailValid = true
        }
    
        var passwordValid = false;
        if(password.length == 0){
            setPasswordError("Password is required");
        }        
        else if(password.length < 6){
            setPasswordError("Password should be minimum 6 characters");
        }      
        else if(password.indexOf(' ') >= 0){        
            setPasswordError('Password cannot contain spaces');                          
        }    
        else{
            setPasswordError("")
            passwordValid = true
        }        
    
        if(emailValid && passwordValid){            
            alert('Email: ' + email + '\nPassword: ' + password); 
            setEmail("");
            setPassword("");
        }        
    
      }
    return (
        <View>
            <View>
                <View>
                    <TextInput placeholder="Enter Email" onChangeText={text => setEmail(text)} value={email} />
                </View>
                {emailError.length > 0 &&
                  <Text>{emailError}</Text>
                }
                <View>
                    <TextInput placeholder="Enter Password" onChangeText={text => setPassword(text)} value={password} />
                </View>
                {passwordError.length > 0 &&
            
                  <Text>{passwordError}</Text>
                }
                <Button onPress={handleSubmit} title='submit' />
</View>
            <View>
                <Text>
                Email entered: {email}            
                </Text>
                <Text>            
                Password entered: {password}
                </Text>        
            </View>
            
        </View>
    )
}
export default FormList

First, we import all the required components from the respective dependencies. We set four useState hooks for email and password fields. Here they will change their initial state, that’s why we use the concept of React Hook. We set their initial state as empty because we want users to fill in the information in the given field.

Now in the handle submit arrow function we set two variables, one for email and one for password. If the user leaves the email field empty in the email field, it will show “Email is required”. If the user puts space between their email addresses, the application will show “Email cannot contain spaces”. The same goes for the password field. Now you have a little bit of an idea about how these things work. Now if you want to set a special kind of error then you can set it this way.

After doing all this, we simply return the form in the form of the simplest UI. Because you can customize the UI. The important part is the concept. We show on screen if any kind of validation form error occurs.

Save the FormList.js and import it in App.js. Something like this.

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import FormList from './FormList';
export default function App() {
  return (
    <View style={styles.container}>
      <FormList/>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Save App.js and run this application on your terminal or command prompt window using the command: npm start

Scan the QR code from your IOS or Android devices. This project will run smoothly on both the devices and see the project in action.

Validation form error in react native

Thank You.