Yashotantra Academy logo
← React Native theorytheory 0/50 · 0%
level 1
Curious · 0 XP
streak
0d
perfect
0
badges
0

100 XP to Apprentice

Components · medium

24. Forms with validation

Validating a send-transaction form.

1 min read3 questionsup to 50 XPtopic 24/50

Read in another language

AI translates the explanation and quiz text while preserving code and answer scoring.

Real forms need field-level validation before allowing submission — e.g. checking that a recipient address is well-formed and an amount is a positive number not exceeding the balance.

function validateSend(address: string, amount: string, balance: number) {
  const errors: Record<string, string> = {};
  if (!/^0x[a-fA-F0-9]{40}$/.test(address)) errors.address = "Invalid address";
  const n = Number(amount);
  if (!Number.isFinite(n) || n <= 0) errors.amount = "Enter a positive amount";
  else if (n > balance) errors.amount = "Insufficient balance";
  return errors;
}

Surfacing errors per-field (not just a single generic message) helps users fix mistakes faster, especially in a wallet UI where a wrong address could mean lost funds.

How to study this topic

  1. 1. Read the explanation once end to end, skipping the code.
  2. 2. Re-read the code snippets and say out loud what each line does.
  3. 3. Answer the quiz without scrolling back — that is the real check.
  4. 4. Read every explanation, even for the answers you got right.

Scoring

  • · Up to 30 XP from quiz accuracy.
  • · +15 XP for a perfect first attempt.
  • · +5 XP while a 3-day streak is running.
  • · 75% or higher marks the topic complete.

Check your understanding

  1. 1. Why validate an address with a regex like /^0x[a-fA-F0-9]{40}$/?

  2. 2. Why check amount against balance client-side?

  3. 3. Why show per-field errors instead of one generic message?

Badges

First light
Pass your first topic
Sharp shooter
3 perfect first-try quizzes
On a roll
Study 3 days in a row
Week warrior
Study 7 days in a row
Grinder
Earn 500 XP
Deep diver
Earn 1500 XP