Form validation patterns in React Native - Mini App: Build & Ship

Build: User Registration

A simple user registration form that validates input fields before submission.

Target UI

-------------------------
| User Registration     |
|-----------------------|
| Name: [___________]   |
| Email: [___________]  |
| Password: [_______]   |
|                       |
| [ Register ]          |
-------------------------

Three input fields: Name, Email, Password

Name must not be empty

Email must be a valid email format

Password must be at least 6 characters

Show error messages below each field if invalid

Disable Register button if any field is invalid

Show alert 'Registration Successful' on valid submission

Starter Code

React Native

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

export default function UserRegistration() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // TODO: Add validation state and functions here

  return (
    <View style={styles.container}>
      <Text style={styles.title}>User Registration</Text>
      <Text>Name:</Text>
      <TextInput
        style={styles.input}
        value={name}
        onChangeText={setName}
        placeholder="Enter your name"
        autoCapitalize="words"
        accessibilityLabel="Name input"
      />
      {/* TODO: Show name error message here */}

      <Text>Email:</Text>
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={setEmail}
        placeholder="Enter your email"
        keyboardType="email-address"
        autoCapitalize="none"
        accessibilityLabel="Email input"
      />
      {/* TODO: Show email error message here */}

      <Text>Password:</Text>
      <TextInput
        style={styles.input}
        value={password}
        onChangeText={setPassword}
        placeholder="Enter your password"
        secureTextEntry
        accessibilityLabel="Password input"
      />
      {/* TODO: Show password error message here */}

      <Button
        title="Register"
        onPress={() => { /* TODO: Handle submit */ }}
        disabled={true} // TODO: Enable when form is valid
        accessibilityLabel="Register button"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    flex: 1,
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
    fontWeight: 'bold',
  },
  input: {
    borderWidth: 1,
    borderColor: '#999',
    borderRadius: 4,
    padding: 8,
    marginBottom: 5,
  },
  errorText: {
    color: 'red',
    marginBottom: 10,
  },
});

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

React Native

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

export default function UserRegistration() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const [nameError, setNameError] = useState('');
  const [emailError, setEmailError] = useState('');
  const [passwordError, setPasswordError] = useState('');

  const [isFormValid, setIsFormValid] = useState(false);

  function validateName(value) {
    if (value.trim().length === 0) {
      setNameError('Name cannot be empty');
      return false;
    } else {
      setNameError('');
      return true;
    }
  }

  function validateEmail(value) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      setEmailError('Enter a valid email');
      return false;
    } else {
      setEmailError('');
      return true;
    }
  }

  function validatePassword(value) {
    if (value.length < 6) {
      setPasswordError('Password must be at least 6 characters');
      return false;
    } else {
      setPasswordError('');
      return true;
    }
  }

  useEffect(() => {
    const nameValid = validateName(name);
    const emailValid = validateEmail(email);
    const passwordValid = validatePassword(password);
    setIsFormValid(nameValid && emailValid && passwordValid);
  }, [name, email, password]);

  function handleRegister() {
    Alert.alert('Registration Successful');
    setName('');
    setEmail('');
    setPassword('');
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>User Registration</Text>

      <Text>Name:</Text>
      <TextInput
        style={styles.input}
        value={name}
        onChangeText={setName}
        placeholder="Enter your name"
        autoCapitalize="words"
        accessibilityLabel="Name input"
      />
      {nameError ? <Text style={styles.errorText}>{nameError}</Text> : null}

      <Text>Email:</Text>
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={setEmail}
        placeholder="Enter your email"
        keyboardType="email-address"
        autoCapitalize="none"
        accessibilityLabel="Email input"
      />
      {emailError ? <Text style={styles.errorText}>{emailError}</Text> : null}

      <Text>Password:</Text>
      <TextInput
        style={styles.input}
        value={password}
        onChangeText={setPassword}
        placeholder="Enter your password"
        secureTextEntry
        accessibilityLabel="Password input"
      />
      {passwordError ? <Text style={styles.errorText}>{passwordError}</Text> : null}

      <Button
        title="Register"
        onPress={handleRegister}
        disabled={!isFormValid}
        accessibilityLabel="Register button"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    flex: 1,
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
    fontWeight: 'bold',
  },
  input: {
    borderWidth: 1,
    borderColor: '#999',
    borderRadius: 4,
    padding: 8,
    marginBottom: 5,
  },
  errorText: {
    color: 'red',
    marginBottom: 10,
  },
});

This solution uses React Native functional components with hooks to manage form state and validation.

We keep track of the input values and their error messages separately. Each field has a validation function that sets an error message if invalid or clears it if valid.

The useEffect hook runs validation whenever any input changes, updating a boolean isFormValid state. This boolean controls whether the Register button is enabled.

When the Register button is pressed, an alert shows success, and the form resets.

Error messages appear below each input if the input is invalid, helping the user fix mistakes before submitting.

Final Result

Completed Screen

-------------------------
| User Registration     |
|-----------------------|
| Name: [John Doe   ]   |
|                       |
| Email: [john@example] |
| Enter a valid email    |
| Password: [******]    |
| Password must be at   |
| least 6 characters    |
|                       |
| [ Register ]          |
-------------------------

User types in each field; errors show if invalid

Register button is disabled until all fields are valid

Tapping Register shows alert 'Registration Successful' and clears form

Stretch Goal

Add a toggle button to show or hide the password text

💡 Hint

Use a state variable to switch the TextInput's secureTextEntry prop between true and false

Practice

1. What is the main purpose of form validation in a React Native app?

easy

A. To check user input and show errors if needed

B. To change the app's theme colors

C. To speed up the app loading time

D. To add animations to buttons

Solution

1. Step 1: Understand form validation role

   Form validation is used to check if user input is correct or complete.

2. Step 2: Identify the correct purpose

   Only To check user input and show errors if needed describes checking input and showing errors, which is the main goal.

3. Final Answer:

   To check user input and show errors if needed -> Option A

4. Quick Check:

   Form validation = check input and show errors [OK]

Hint: Form validation means checking input for mistakes [OK]

Common Mistakes:

• Confusing validation with UI styling
• Thinking validation speeds app loading
• Mixing validation with animations

2. Which of the following is the correct way to define a simple validation function in React Native?

easy

A. validate = (text) => { text.length > 0 ? 'Error' : ''; }

B. function validate(text) { return text.length < 0 ? 'Error' : ''; }

C. const validate = (text) => text.length > 0 ? '' : 'Required';

D. const validate = text => { if text.length = 0 return 'Error'; }

Solution

1. Step 1: Check syntax correctness

   const validate = (text) => text.length > 0 ? '' : 'Required'; uses correct arrow function syntax and returns empty string if valid.

2. Step 2: Identify logical correctness

   const validate = (text) => text.length > 0 ? '' : 'Required'; returns 'Required' if text is empty, which is expected behavior.

3. Final Answer:

   const validate = (text) => text.length > 0 ? '' : 'Required'; -> Option C

4. Quick Check:

   Correct arrow function with conditional return = const validate = (text) => text.length > 0 ? '' : 'Required'; [OK]

Hint: Arrow functions with conditional return are common for validation [OK]

Common Mistakes:

• Using assignment '=' instead of comparison '==' or '==='
• Missing return statements in function
• Incorrect arrow function syntax

3. Given this code snippet, what will be the value of error after calling validate('')?

const validate = (text) => {
  if (text.trim() === '') {
    return 'Field cannot be empty';
  }
  return '';
};
const error = validate('');

medium

A. null

B. '' (empty string)

C. undefined

D. 'Field cannot be empty'

Solution

1. Step 1: Analyze the input to validate function

   The input is an empty string ''. The trim() method removes spaces but here input is already empty.

2. Step 2: Follow the if condition logic

   Since text.trim() === '', the function returns 'Field cannot be empty'.

3. Final Answer:

   'Field cannot be empty' -> Option D

4. Quick Check:

   Empty input triggers error message [OK]

Hint: Empty strings trigger error messages in validation [OK]

Common Mistakes:

• Assuming empty string returns empty error
• Ignoring trim() effect
• Confusing return values

4. Identify the error in this validation function:

const validateEmail = (email) => {
  if (!email.includes('@')) {
    'Invalid email';
  }
  return '';
};

medium

A. Missing return statement inside if block

B. Using includes() is incorrect for email validation

C. Function should be async

D. Return statement should be outside the function

Solution

1. Step 1: Check if error message is returned

   The if block has a string 'Invalid email' but no return keyword, so it does nothing.

2. Step 2: Understand function flow

   Because no return in if, function always returns empty string, ignoring errors.

3. Final Answer:

   Missing return statement inside if block -> Option A

4. Quick Check:

   Return missing in if block causes no error shown [OK]

Hint: Always return error messages inside conditions [OK]

Common Mistakes:

• Forgetting return keyword in if block
• Assuming string alone returns value
• Misusing async when not needed

5. You want to validate a password field that must be at least 8 characters and contain a number. Which validation function correctly implements this?

hard

A. const validatePassword = (pwd) => pwd.length >= 8 || /\d/.test(pwd) ? '' : 'Password must be 8+ chars and include a number';

B. const validatePassword = (pwd) => { if (pwd.length < 8) return 'Too short'; if (!/\d/.test(pwd)) return 'No number'; return ''; };

C. const validatePassword = (pwd) => { if (pwd.length > 8 || /\d/.test(pwd)) return ''; else return 'Invalid'; };

D. const validatePassword = (pwd) => pwd.length > 8 && /\d/.test(pwd) ? 'Valid' : 'Invalid';

Solution

1. Step 1: Check each condition separately

   const validatePassword = (pwd) => { if (pwd.length < 8) return 'Too short'; if (!/\d/.test(pwd)) return 'No number'; return ''; }; checks length first, returns 'Too short' if less than 8, then checks for number, returns 'No number' if missing.

2. Step 2: Confirm final return for valid password

   If both conditions pass, it returns empty string meaning no error, which is correct.

3. Final Answer:

   const validatePassword = (pwd) => { if (pwd.length < 8) return 'Too short'; if (!/\d/.test(pwd)) return 'No number'; return ''; }; -> Option B

4. Quick Check:

   Separate checks with returns for each error = const validatePassword = (pwd) => { if (pwd.length < 8) return 'Too short'; if (!/\d/.test(pwd)) return 'No number'; return ''; }; [OK]

Hint: Check each rule separately and return specific errors [OK]

Common Mistakes:

• Using OR instead of AND for conditions
• Returning success message instead of empty string
• Combining conditions incorrectly