Validation
- React Native course
- Intermediate
- Lesson 32/116
- 5 min
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.
Practice 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.
Starter code
// Import useState and Text, TextInput
function EmailForm() {
// Start email and errors state (both empty)
// validate function: check the email and write the error with setErrors
return null;
}Sample 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}
</>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the concept to its role
| Term | Meaning |
|---|---|
errors |
Error object |
setErrors |
Updates errors |
includes("@") |
Email check |
validation |
Rule check |
2 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) Correct answer
Explanation: With conditional render the error shows when present, otherwise null.
3 Write the email check
if (!email____("@")) setErrors({ email: "Geçersiz e-posta" });if (!email.includes("@")) setErrors({ email: "Geçersiz e-posta" });Explanation: .includes("@") looks for the @ sign.