Form validation patterns in React Native

Introduction

Form validation helps check if the user entered the right information before sending it. It stops mistakes and makes apps easier to use.

When asking users to sign up or log in with email and password.

When collecting phone numbers or addresses in a form.

When making sure a required field is not left empty.

When checking if a password is strong enough.

When confirming that two password fields match.

Syntax

React Native

const validate = (value) => {
  if (!value) return 'Field is required';
  if (value.length < 3) return 'Too short';
  return '';
};

Validation functions usually take the input value and return an error message or empty string.

You can use simple if checks or regular expressions for patterns.

Examples

This checks if the email is empty or does not match a simple email pattern.

React Native

const validateEmail = (email) => {
  const regex = /^[\w.-]+@[\w-]+\.[a-z]{2,}$/i;
  if (!email) return 'Email is required';
  if (!regex.test(email)) return 'Invalid email';
  return '';
};

This ensures the password is not empty and has at least 6 characters.

React Native

const validatePassword = (password) => {
  if (!password) return 'Password is required';
  if (password.length < 6) return 'Password too short';
  return '';
};

This compares two password fields to make sure they are the same.

React Native

const validateConfirmPassword = (password, confirm) => {
  if (confirm !== password) return 'Passwords do not match';
  return '';
};

Sample App

This React Native app has an email input and a submit button. When you press submit, it checks if the email is empty or wrong. If valid, it shows an alert. If not, it shows an error message in red below the input.

React Native

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

export default function App() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const validateEmail = (value) => {
    const regex = /^[\w.-]+@[\w-]+\.[a-z]{2,}$/i;
    if (!value) return 'Email is required';
    if (!regex.test(value)) return 'Invalid email';
    return '';
  };

  const handleSubmit = () => {
    const errorMsg = validateEmail(email);
    setError(errorMsg);
    if (!errorMsg) {
      Alert.alert('Success', 'Email is valid!');
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Enter your email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
        style={{ borderWidth: 1, borderColor: '#ccc', padding: 10, marginBottom: 5 }}
        accessibilityLabel="Email input"
      />
      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
      <Button title="Submit" onPress={handleSubmit} accessibilityLabel="Submit button" />
    </View>
  );
}

Important Notes

Always give clear error messages so users know what to fix.

Validate on submit or as the user types for better experience.

Use accessibility labels so screen readers can describe inputs and errors.

Summary

Form validation checks user input to prevent mistakes.

Use simple functions to return error messages or empty strings.

Show errors clearly and use accessibility features for all users.