Forms & Validation

Reading values from form fields

Every form input has a value property that holds its current contents as a string, even for number inputs, so you'll often need to convert it with Number() when you need to do arithmetic with it. Checkboxes and radio buttons instead expose a checked property, true or false, since their meaningful state isn't text. You can grab any of these with querySelector, exactly as you learned in the DOM chapter, and read or set their value property just like you would textContent on other elements.

1const form = document.querySelector("#signup-form");23form.addEventListener("submit", (event) => {4  event.preventDefault();5  const email = document.querySelector("#email").value;6  const agree = document.querySelector("#agree").checked;7  console.log(email, agree);8});

Built-in HTML validation

HTML itself provides basic validation attributes you can add directly to inputs: required prevents submission if a field is empty, type="email" checks for a roughly valid email shape, minlength and maxlength constrain text length, and min and max constrain numeric ranges. These run automatically when a form is submitted, showing the browser's built-in error messages, and cost you nothing extra in JavaScript. They're a great first line of defense, but they can't check things specific to your app, like whether a username is already taken or whether two password fields match, which is where JavaScript validation comes in.

1<input type="email" required />2<input type="password" minlength="8" required />3<input type="number" min="1" max="10" />

Custom validation with JavaScript

For rules HTML can't express, you write your own checks in the submit handler, after calling preventDefault, and decide what to do based on the result. A common pattern is to build up a list of error messages using conditionals, then, if that list is non-empty, stop and display the errors instead of proceeding. This is exactly the same conditional logic you learned in Level 2, applied specifically to values read out of form fields. Comparing a password field to a confirm-password field, checking that a chosen username has no spaces, or verifying an age is above a minimum are all typical examples that require this kind of custom logic.

1form.addEventListener("submit", (event) => {2  event.preventDefault();3  const password = document.querySelector("#password").value;4  const confirm = document.querySelector("#confirm").value;5  const errors = [];67  if (password.length < 8) {8    errors.push("Password must be at least 8 characters.");9  }10  if (password !== confirm) {11    errors.push("Passwords do not match.");12  }1314  if (errors.length > 0) {15    console.log(errors);16    return;17  }1819  console.log("Form is valid, submitting...");20});

Showing feedback in the page

Logging errors to the console is fine for testing, but real users need to see feedback directly in the page. The pattern is familiar from the DOM chapter: select or create an element near the relevant field, set its textContent to the error message, and use classList to add a visible error style, then remove that class again once the field becomes valid. Doing this per-field, rather than one big error message at the top of the form, helps people fix problems faster because the feedback appears right next to the thing that needs attention.

• HTML attributes like required, type="email", and minlength catch simple problems with no JavaScript.
• value reads a text input's current contents; checked reads a checkbox or radio button's state.
• Custom rules that HTML can't express, like matching two fields, need JavaScript inside a submit handler.
• Collecting all errors before showing feedback lets users fix everything in one pass instead of one at a time.

1const emailInput = document.querySelector("#email");2const emailError = document.querySelector("#email-error");34if (!emailInput.value.includes("@")) {5  emailError.textContent = "Please enter a valid email address.";6  emailInput.classList.add("invalid");7} else {8  emailError.textContent = "";9  emailInput.classList.remove("invalid");10}