Client-side form handling
Handle a basic form on the client-side
The way of kata
Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.
The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.
All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).
To make the best of katas, observe the following rules.
- Don't rush.
- When stuck, take a break and do something unrelated.
- Do not copy/paste code. Always retype everything.
- Do not use AI tools to generate code.
- Try to do something that wasn't in the instructions, experiment.
- Repeat the kata from time to time, even if you think you've got it.
- You have mastered the kata once you are able to complete it without thinking too much.
Remember, the goal is not to get it done, but to get some practice.
Introduction
In this exercise, you will practice basic client-side form handling.
Skills you will acquire
- Client-side form validation
- Built-in form behaviors
- Preventing form submission
- Capturing form data
Objective
Using the sample page:
- Add form validation to form controls in order to satisfy the criteria in the checklist
- Prevent normal form submission
- Capture the data from the form and output it to console
Check your solution
- Form will not submit if name field is blank
- Form will not submit if the email field is blank or contains an invalid email
- Form will not submit if the age field is blank, contains a value other than a number, or is or less than 13
- Form will not submit if the password is blank
- Form will not submit if the password is shorter than 8 characters
- Form will not submit if the password does not include at least 1 number, 1 special character, one lower-case and one upper-case letter
- Form will not submit if the password is not repeated correctly
- Form will not submit if the user does not consent to the terms and services
- When form is submitted, the data of the fields except the repeated password field is output to the console as an object
Materials
Keep in mind
On the client side, the browser provides a validation mechanism called Constraint validation. This mechanism includes various built-in behaviors, HTML attributes, and JavaScript APIs that all work together to provide a comprehensive, customizable, and accessible form validation.
The checklist describes various constraints for different fields on the page — conditions that should be met for the field to be considered valid. Some of these constraints are determined by the field type, some require additional attributes, and others will require JavaScript.
Please note that although convenient validators may appear to exist for a given
constraint, you also need to consider the use case. Let me give you an example.
Let's say you are working on a shopping cart app, and you have a quantity field
that is restricted to 5 items per buyer. You may say "Oh, great, I'll just use a
max attribute!" The validation message for this field will say "Value must be
less than or equal to 5." It sounds a bit bureaucratic, doesn't it? It also
doesn't explain why it must be 5 or less. Therefore, we invest a bit more effort
into it so that the validation message reads "Purchases are limited to 5 items
per customer. Please select a quantity of 5 or less." (An even better solution
is to use a select list for such small quantities. This was just an example to
illustrate the point.)
The constraint validation API treats validation and error-reporting separately. Even when we set a custom error message, it is not immediately reported until the form is submitted. This is as expected, and it's as it should be. Don't try to override this behavior. Observe what happens when you try to submit an invalid form. Where does the keyboard focus go? What messages are shown, and what messages remain hidden?
The default behaviors of all elements are cancelled by attaching an event
listener for that particular behavior, and then calling preventDefault()
on the event object within the listener.
The submit button on the form is only one of the mechanism with which the form can be submitted. In single-line text fields, we can also press the Enter key to submit the form. Keep this in mind when handling form submission and/or attempting to cancel it.
There are several ways to capture the form data. The easiest way is to use the
FormData constructor. You can also access the fields using the elements
property on the form element. Lastly, you can just select the individual form
elements and get their value. Try all three options.
The consent field is a checkbox. When capturing data,