From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 5.15: Validating Forms

As we are using forms on the client side, validation becomes even more important as we want to make sure what the user enters into a form is valid. That said, client-side validation is also important for client-server architectures as it saves time and bandwidth. When a user enters wrong information, sending it to a server requires that the server validates the information and if there are errors has to send a new form with errors noted back to the user. You will always need to validate on the server as you can’t trust the user isn’t tampering with the information being sent.

Validation is simply the process of making sure the information that the user entered into a form is consistent with the type of information you are expecting to receive from the user. HTMLs input tag provides several attributes for doing validation, most of which has been mentioned earlier, but lets review them.

The most obvious attribute that helps with validation is the type attribute. The whole reason that we have more precise types such as url or email is so that a built-in pattern checker can be used to determine if the input entered into that input type matches that input.

For numbers, we have min and max attributes which lets us specify the range of the numbers that we are about to enter. You do not need to have both of these attributes, but can have just a minimum value for a number or just a maximum value for the number.

The string equivalent of min and max are the minlength and maxlength attributes. These are used to specify how many characters should be in a string. These do not need to be used together so you can have a specified minimum length for the string but don’t care how long it is. More often, you will have storage limits so will have a maximum number of characters in the string but don’t mind if the user doesn’t enter anything.

To make sure that an input field has been filled in, we have the required attribute. As mentioned in the previous section, this has the property that if it is a dialog box then you are not able to close the dialog box until the input field has been filled out. Using it with a form will prevent that form from being submitted until the field has been filled out.

There is one attribute that is the elephant in the room. The pattern attribute requires that the input element’s output matches a pattern. This pattern is expressed using something called a regular expression. Regular expressions are templates for matching characters. Basic patters are exact matches of characters. Example “abc” will match “abcde” but not “acb” as the order and spacing of the pattern must match. More advanced regular expressions expect certain sequences of characters with potentially complex rules. These can include things such as variable numbers of wildcard characters, repeatable sequences, a set of allowed sequences, optional sequences, and set boundaries for the sequence. This is a very complex topic, with books having been written on it, so we will not be exploring it in this book (but may do so in future books) but as you may be interested in taking advantage of this feature, will recommend those of you who are interested in this advanced topic take a look at Mozilla’s excellent over of the topic located at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions.

If the above is not enough, there is another way of validating forms. Using JavaScript. We will look at that next.