Validation, error handling and browser developer tools

People make mistakes in forms: an empty name, an email with no at sign, an age typed as words. Your code will also make mistakes, and sometimes a file will fail to load. A beginner who can check input politely and read the browser's own error reports can fix most problems alone, without waiting for anyone to help. This lesson gives you both skills, using tools already built into your browser.

Validating form input

Validation means checking that data is acceptable before using it. On a web form you do it so people get quick, kind feedback: "Please enter your name" appears at once instead of after a slow round trip to a server. The pattern is always the same: read the value, test it, and either show a message or carry on.

HTML can already do some checking with no JavaScript at all. Attributes such as required, type="email", minlength and min and max on numbers make the browser block submission and show its own message. Use those first, then add JavaScript for rules HTML cannot express, such as "the two passwords must match" or a friendlier message.

<form id="signup" novalidate>
  <label for="name">Name</label>
  <input id="name" name="name" type="text">

  <label for="email">Email</label>
  <input id="email" name="email" type="email">

  <label for="age">Age</label>
  <input id="age" name="age" type="number">

  <button type="submit">Join</button>
  <p id="feedback" role="alert"></p>
</form>

<script>
  const form = document.querySelector("#signup");
  const feedback = document.querySelector("#feedback");

  function checkForm(name, email, age) {
    if (name.trim() === "") {
      return "Please enter your name.";
    }
    if (!email.includes("@") || !email.includes(".")) {
      return "Please enter an email such as amina@example.com.";
    }
    if (Number.isNaN(age) || age < 16 || age > 120) {
      return "Age must be a number from 16 to 120.";
    }
    return "";
  }

  form.addEventListener("submit", function (event) {
    event.preventDefault();
    const problem = checkForm(
      form.elements.name.value,
      form.elements.email.value,
      Number(form.elements.age.value)
    );
    feedback.textContent = problem === "" ? "Thank you, you are on the list." : problem;
  });
</script>

Three things are worth noticing. event.preventDefault() stops the browser sending the form away so your code can look first. trim() removes spaces at the ends, so a name of only spaces counts as empty. And the message goes into an element marked role="alert", which tells a screen reader to announce it. The attribute novalidate switches off the browser's own bubbles so you can see your messages; remove it to compare.

Handling errors with try/catch

Some failures cannot be predicted by an if: text that is not valid JSON data, a missing file, a network drop. When this happens JavaScript raises an exception, and unless something handles it the script stops at that line. A try/catch block lets you try risky code and, if it fails, run a different block that reports the problem calmly.

function readSettings(text) {
  try {
    const settings = JSON.parse(text);
    console.log("Loaded colour:", settings.colour);
    return settings;
  } catch (error) {
    console.log("Could not read settings:", error.message);
    return { colour: "green" };   // a safe default
  } finally {
    console.log("Finished reading.");
  }
}

readSettings('{ "colour": "blue" }');
readSettings("{ colour: blue");

The first call parses fine. The second text has no quotation marks around colour and no closing bracket, so JSON.parse throws. The catch block receives an error object with a message, and the code returns a safe default so the rest of the page keeps working. The finally block, which is optional, runs in both cases. The exact wording of the message differs between browsers.

The browser's developer tools

Every major browser includes developer tools. Open them with F12 or with Ctrl+Shift+I; right-clicking a page element and choosing Inspect also works. Menu names vary a little between Firefox, Chrome and Edge and change between versions, but these three panels exist in all of them.

A debugging routine

1. Reproduce the problem and note exactly what you did.
2. Open the Console and read the first red message, including the file and line.
3. Open that line in your editor and look at it, and the line above it, for spelling, case, brackets and commas.
4. Use console.log to print the values near the problem and compare them with what you expected.
5. Change one thing at a time, refresh, and check again.