Validating input before acting on it

Understanding Validating input before acting on it

JavaScript almost never refuses a value. Number("") is 0, Number(null) is 0, "3" * 2 is 6 while "3" + 2 is "32", and every comparison against NaN is false. Bad input therefore does not stop your function; it slides through and produces a believable wrong answer that ends up in a total, a stored record, or a rendered page. Validation is the point where you refuse a value while you still know where it came from and what it was supposed to mean.

Treat a validator as a funnel that shrinks the set of values allowed to reach the code below it, in a fixed order: is it present, is it the right type, normalize it once, then is it in range. The order is not cosmetic. raw.trim() throws if raw is null, and n < 1 cannot reject NaN because relational comparisons with NaN are always false, so a range check placed before a type check quietly approves garbage. Coerce exactly once, right where the type is confirmed, and keep that result; re-coercing later is how a value gets checked as a number and then used as a string.

Validate where untrusted data enters: a form field, a JSON.parse result, a URL query string, arguments handed to you by code you do not control. Convert it there into a trusted shape so the functions underneath do not each repeat the same defensive tests, and stay aware of what the entry point can really hand you, since JSON.parse("null") succeeds and typeof null is "object", so a shape check needs value !== null too. Report a reason rather than just true or false, because the caller nearly always has to show a message or pick a fallback, and packaging the reason together with the cleaned value means nobody parses the same input twice.

A validator is only useful if the code after it is allowed to relax. Once parseQuantity has returned a confirmed integer, downstream functions should not re-test it; duplicated checks drift apart over time and the weakest copy becomes the real rule.

function parseQuantity(raw) {
  if (typeof raw !== "string") return { ok: false, reason: "must be text" };

  const trimmed = raw.trim();
  if (trimmed === "") return { ok: false, reason: "required" };

  const n = Number(trimmed);
  if (!Number.isInteger(n)) return { ok: false, reason: "must be a whole number" };
  if (n < 1 || n > 99) return { ok: false, reason: "must be 1 to 99" };

  return { ok: true, value: n };
}

const inputs = ["7", "  12  ", "", "3.5", "0", "12abc", "1e3", null];

for (const raw of inputs) {
  const result = parseQuantity(raw);
  const shown = result.ok ? "value " + result.value : "rejected: " + result.reason;
  console.log(JSON.stringify(raw), "->", shown);
}

Worked examples

function validateSignup(form) {
  const errors = [];

  if (typeof form.email !== "string" || !form.email.includes("@")) errors.push("email");
  if (!Number.isFinite(form.age) || form.age < 13) errors.push("age");
  if (form.terms !== true) errors.push("terms");

  return errors;
}

const forms = [
  { email: "ada@example.com", age: 30, terms: true },
  { email: "ada@example.com", age: NaN, terms: true },
  { email: "", age: 12, terms: "yes" },
  { email: "ada@example.com", age: "30", terms: true }
];

for (const form of forms) {
  const errors = validateSignup(form);
  console.log(errors.length === 0 ? "accepted" : "rejected: " + errors.join(", "));
}

function describeRating(rating) {
  if (!rating) return "no rating given";
  return "rating: " + rating;
}

function describeRatingFixed(rating) {
  if (rating == null) return "no rating given";
  if (!Number.isInteger(rating) || rating < 0 || rating > 5) return "invalid rating";
  return "rating: " + rating;
}

console.log(describeRating(4));
console.log(describeRating(0));
console.log(describeRatingFixed(0));
console.log(describeRatingFixed(undefined));
console.log(describeRatingFixed("4"));

const SIZES = ["small", "medium", "large"];

function parseSize(raw) {
  if (typeof raw !== "string") return null;
  const key = raw.trim().toLowerCase();
  return SIZES.includes(key) ? key : null;
}

console.log(parseSize("Large"));
console.log(parseSize(" medium "));
console.log(parseSize("LARGE"));
console.log(parseSize("huge"));
console.log(parseSize(undefined));

Important notes

Common mistakes

Try it yourself