Validation

Learn form validation.

What is validation?

Validation is checking whether the user's input follows your conditions. For example an email must contain @; a password must be at least 8 characters. When validation fails you show an error message.

In React Native you keep a separate state for validation: const [errors, setErrors] = useState({});. The validation function checks each field and fills the errors object. Example: if (!form.email.includes("@")) setErrors({ ...errors, email: "Invalid email" });. When there is an error you show it on screen with a red Text. Validation usually runs before submission; but it can also run on every keystroke. This guides the user with immediate feedback.

Showing errors

When validation finds an error you show it on screen. The typical pattern is showing the error in a red Text below the input. To do this you use conditional rendering: {errors.email ? <Text style={{ color: "red" }}>{errors.email}</Text> : null}.

Here if errors.email is truthy you show the error text; otherwise you return null and nothing is drawn. This pattern keeps the form clean while still giving clear feedback. When there is no error the slot stays empty. For several fields you repeat the same pattern for each one. Error messages should be short and clear; use everyday language over technical terms.

Exercise Add email validation

Write an EmailForm component. Start email and errors state (both empty) with useState. Write a validate function: if not email.includes("@") call setErrors({ email: "Invalid email" }). In TextInput's onChangeText call both setEmail and validate. If errors.email exists show it in a red Text.

Show example solution

import { useState } from "react";
import { Text, TextInput } from "react-native";

function EmailForm() {
  const [email, setEmail] = useState("");
  const [errors, setErrors] = useState({});
  function validate(value) {
    if (!value.includes("@")) {
      setErrors({ email: "Invalid email" });
    } else {
      setErrors({});
    }
  }
  return (
    <>
      <TextInput
        value={email}
        onChangeText={(t) => { setEmail(t); validate(t); }}
        placeholder="Email"
      />
      {errors.email ? <Text style={{ color: "red" }}>{errors.email}</Text> : null}
    </>
  );
}

Test yourself

Match the concept to its role

errors

Error object
setErrors

Updates errors
includes("@")

Email check
validation

Rule check
How is a validation error shown?
```
{errors.email ? <Text style={{ color: "red" }}>{errors.email}</Text> : null}
```
- With a green Text
- Alert ile her zaman
- Console.log ile
- With conditional rendering (errors.email ? ... : null)
Show answer

With conditional rendering (errors.email ? ... : null) — With conditional render the error shows when present, otherwise null.

Write the email check

if (!email____("@")) setErrors({ email: "Geçersiz e-posta" });

Show answer

if (!email.includes("@")) setErrors({ email: "Geçersiz e-posta" });

Next lesson: Submit

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies