Form validation patterns in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when submitting a form with empty required fields?

Consider a React Native form with required text inputs and a submit button. What is the expected behavior when the user taps submit without filling any required fields?

React Native

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

export default function MyForm() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = () => {
    if (!name) {
      setError('Name is required');
    } else {
      setError('');
      // proceed with submission
    }
  };

  return (
    <View>
      <TextInput
        placeholder="Name"
        value={name}
        onChangeText={setName}
        accessibilityLabel="Name input"
      />
      {error ? <Text accessibilityLiveRegion="polite" style={{color: 'red'}}>{error}</Text> : null}
      <Button title="Submit" onPress={handleSubmit} accessibilityLabel="Submit form" />
    </View>
  );
}

A The form shows an error message below the input and does not submit.

B The form submits successfully even if the input is empty.

C The app crashes due to missing input validation.

D The input field automatically fills with a default value.

💡 Hint

Think about what the code does when the input is empty.

The code checks if the name is empty and sets an error message. This prevents submission and informs the user.

📝 Syntax

intermediate

Which option correctly validates an email format in React Native?

Choose the code snippet that correctly validates an email string using a regular expression in React Native.

React Native

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

A const validateEmail = email => email.test(/^[\w-.]+@[\w-]+\.[a-z]{2,}$/i);

B const validateEmail = email => email.match(/^[\w-.]+@[\w-]+\.[a-z]{2,}$/i);

C const validateEmail = email => email.includes('@') && email.includes('.');

D const validateEmail = email => /^[\w-.]+@[\w-]+\.[a-z]{2,}$/i.test(email);

💡 Hint

Look for the method that returns true or false for regex matching.

The test method on regex returns a boolean indicating if the string matches the pattern. Option D uses it correctly.

❓ lifecycle

advanced

When does form validation typically run in React Native controlled components?

In a controlled React Native form, at which points is validation usually triggered?

A Only when the input loses focus (blur event).

B On every input change and on form submission.

C Only when the component mounts.

D Only when the user submits the form.

💡 Hint

Think about giving immediate feedback and final checks.

Validation often runs on every input change to give instant feedback and again on submission to ensure all data is valid.

🔧 Debug

advanced

Why does this React Native form not show validation errors?

Given this code snippet, why might the validation error message never appear?

React Native

const [email, setEmail] = useState('');
const [error, setError] = useState('');

const handleSubmit = () => {
  if (!email.includes('@')) {
    error = 'Invalid email';
  } else {
    setError('');
  }
};

A Because the error state is assigned directly instead of using setError.

B Because the email state is not updated on input change.

C Because the includes method is not valid on strings.

D Because the handleSubmit function is never called.

💡 Hint

Check how state variables are updated in React.

State variables must be updated using their setter functions. Direct assignment does not update state or trigger re-render.

🧠 Conceptual

expert

What is the main advantage of using a validation schema library like Yup in React Native forms?

Why would a developer choose to use a validation schema library such as Yup instead of manual validation functions?

A It automatically fixes invalid inputs without user interaction.

B It removes the need to handle form state in React Native.

C It provides a declarative and reusable way to define complex validation rules and error messages.

D It disables the submit button until all inputs are valid without extra code.

💡 Hint

Think about code reuse and clarity in validation logic.

Validation schema libraries let you define rules clearly and reuse them, making validation easier to maintain and test.