beginnerForms

A Form That Works Before the JavaScript Loads

Decide what you would build from the brief alone. Everything below it is available, but the exercise stops working if you open it first.

The brief you were given

Build a signup form: email, password, a country select, a terms checkbox. Validate it and submit it. Start with the platform and add JavaScript only where the platform cannot do the job.

The trap — the wrong fix that looks right

Calling event.preventDefault() on submit, validating with your own regex, and rendering your own error text — which is the shape almost every tutorial teaches, and which passes review because the errors look better than the browser's. What went with it: the messages are now only in the languages you translated, the errors are probably not associated with their fields so a screen reader announces a field as simply "invalid" or not at all, focus stays where it was so a keyboard user has no idea which field failed, and the form no longer works at all if the JavaScript fails to load. The custom errors are worth having; they have to be *added to* the native behaviour rather than substituted for it.