React Native theorytheory 0/50 · 0%
Components · medium

24. Forms with validation

Validating a send-transaction form.

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.

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?