How do you check if an entire form is valid?

Call form.checkValidity() to test all fields silently, or form.reportValidity() to validate and also display the browser's error UI.

const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
    if (!form.checkValidity()) {
        event.preventDefault();
        console.log("Form has errors");
        return;
    }
    // Form is valid, proceed
});

// Or show native browser validation messages
if (!form.reportValidity()) {
    // Invalid - browser shows error UI
}

Difference:

Checking specific invalid fields:

const invalidFields = form.querySelectorAll(":invalid");
invalidFields.forEach(field => {
    console.log(field.name, field.validationMessage);
});