Show validation error Message in the form using React Native Expo

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

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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

No default record type specified for recordTypeVisibility.

Most Used Methods In JavaScript

Our Solution to Make SEO Work for a React JS Site

Learning Tree Traversal

JavaScript/TypeScript Testing Tips

Static Analysis of JavaScript applications with SonarQube

Minting an NFT using thirdweb V2 and Next.js

Speed up NodeJS server-side development with Webpack 4 + HMR

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rohit Kumar Thakur

Rohit Kumar Thakur

ninza7.me

More from Medium

How to create a Basic Authentication App using React Query and React Navigation

Fetching Images With Different Image File Formats Using React

How to make a Tab Bar in React Native 💙

Combining useParams with useEffect for dynamic routes

React logo