Overview of this Lesson

Once you have learned how to create forms for gathering user inputs, you will want to write code to process the form inputs. For many applications this is done on the server and can be done with many server-side technologies such as PHP, Enterprise Java (servlets), or Node.js. An important part of processing form input data is validation of the input data to make sure it's correct and within any required ranges or values. This can be done on the server side but it's also a good practice to validate input data on the client side before it even goes to the server. Client-side can be done with JavaScript, but thank to some additions to one of the more recent versions of HTML, we can do quite a lot of validation using HTML attributes on our input fields!

This lesson shows you what attributes allow you to perform client-side validation and how they work.

Pre-Requisites

Before doing this tutorial, make sure you've completed the Basic Forms tutorial and the Form Input Elements tutorial. It would also be beneficial to know Regular Expressions syntax.

Why Client-Side Validation?

Input data validation generally involves checking for the following things:

Why is client-side validation important? Submitting the form (i.e. by clicking the form's Submit button) causes the browser to make a request to whatever resource is identified in the form's action="" attribute. The server receives the request along with all the form inputs, and then executes the requested file.

An extremely important component of this kind of form processing is validation of the input data. Generally, the server-side program will have code that checks all the input data to make sure it's correct. Even though there is usually server-side code to perform this kind of validation, it's also very important to perform this validation on the client-side, also. But why perform the same validation on both the client-side and the server side? Isn't that redundant?

Performing both client-side and server-side validation isn't redundant at all. There are a few reasons why you should perform validation on both sides:

  1. Efficiency: Why would we want to waste processing by sending a request to the server with invalid data? It's much more efficient if we can validate the data first: if any data is invalid, we don't need to waste time performing a request to submit the form. Additionally, the user doesn't have to wait for the request to complete to see any error messages or problems with their input data: they can see the errors right away.
  2. Convenience: When performing server-side validation, it's important to send a meaningful response back to the user that includes error messages and other information that helps them understand what they did wrong. Because form submission requires a request/response cycle, you will have to send the input data back in the response so the user can see the inputs they had entered before form submission. Writing this code can be tedious and time-consuming. With client-side validation, there is no page refresh, so the user's data is still there on the screen along with error messages, and it requires a lot less code to make this happen.
  3. Reusability: Many parts of an application are re-usable: you might re-use the same input form for other server-side programs, and you might use the same server-side script with other input forms. You may not know who coded the other components, and how robust their validation is, so always include validation on whichever client- or server-side component you're working on, in case it's ever used with another resource that has less robust validation.
  4. Security: Despite all your attempts at creating thorough client-side validation, it's still possible for hackers to use your form to send malicious code to your server-side program. Having server-side validation is still important to maintain the security of your application.

Client-side form validation can be done using built-in form validation with HTML, but more complex and custom validation can also be done with JavaScript Constraint Validation. This tutorial focuses on Built-in HTML Validation.

Creating Required Fields

The simplest and most common input validation is making sure that a field isn't left empty. We can do this by adding the required attribute to an input element. The required attribute is a boolean attribute, so it's not assigned a value. If it's present, it's "true". If it's not included in the tag, it's "false".

When the required attribute is included in the opening tag of an element, the form will not submit. Usually a default error message will appear that indicates the field is required, but how this appears depends on which browser is being used.

an empty required field with error message please fill out this field
The Required field error in Firefox and Chrome

You can try an example and see the code for a required text field using this Codepen:

See the Pen HTML Form Validation: Required by Wendi Jollymore (@ProfWendi) on CodePen.

Minimums and Maximums

There are two sets of attributes that lets you specify minimums and maximums for a field:

See the Pen HTML Forms Min/Max by Wendi Jollymore (@ProfWendi) on CodePen.

Input Formats and Patterns

You will often need to verify that a particular input follows a specific format or pattern. For example:

This can be achieved with the pattern="" attribute. This attribute is assigned a regular expression. A regular expression is a series of special characters that "pattern matches". For example, the regular expression \d{9} matches exactly 9 digits. If you set a field's pattern attribute to that regular expression, the field will only be valid if it contains exactly 5 digits:

See the Pen Form Validation: Pattern by Wendi Jollymore (@ProfWendi) on CodePen.

Regular expressions are beyond the scope of this course, but they're definitely something you should learn, as they are used in almost every language and several other technologes. If you are interested, I have a regular expression tutorial with videos:

Exercise

Try putting it all together with this exercise: Create a form for a pizza shop that allows a user to enter the details for a single pizza. The form should contain:

the pizza form
The Pizza Form (I added styling, you don't have to)