inputPattern

Validate form fields

This translation of my german tutorial is not perfect, but I hope it is all the same helpfull for you. This was originally an exclusively German manual, therefore many examples are optimized for users from Germany. In the course of time some patterns from other regions of the world will be added.

Thank you for using it.

Every web designer has already created several forms in his career. Probably a more or less complicated JavaScript code was included to check whether the entered values are valid and whether all required fields were filled in before sending the form.

It's a little easier now. With HTML5, input fields in Web forms can be compared with a pattern that describes the validity of the input when the browser enters them. For client-side form validation, you simply use the new attributes pattern and required. Together with CSS3 selectors for the optical effects, writing check mechanisms and reporting incorrect entries is greatly simplified. The patterns are like templates into which the entered data must fit.

Creating a pattern is a small hurdle for the website designer. Even if he uses a CMS, a blog software, an editing system, he (still) has to create the patterns himself. If finished solutions are already installed, he must at least check and understand them. According to the rules of World Wide Web Consortium (W3C), the Regular Expressions of ECMAScript Language (JavaScript) are used. But there are small differences, which are of course addressed in the tutorial.

With form patterns and a good browser you can test an astonishing amount, but still another check of the entered data, like for example the calculation of a check digit and the plausibility must be carried out additionally.

Of course it's the same as always. Not all browsers have implanted the check completely and correctly. But that will certainly improve in the future.

Regular Expressions

The pattern comparison with regular expressions has long been used in various programming languages, and there are several tutorials.

In computer science, a regular expression (RegExp or Regex) is a character string used to describe sets of character strings using certain syntactic rules. Regular expressions are mainly used in software development. In addition to implementations in many programming languages, many text editors also have regular expressions in the "Search and Replace" function. A simple use case of regular expressions are wildcards, which almost everyone knows. "*.pdf " in the search field and all PDF files will be found.

Regular expressions can be used as filter criteria in the text search by matching the text with the pattern of the regular expression. This process is also called pattern matching. For example, it is possible to search for all words in a word list that begin with S and end with D - without having to explicitly specify the letters in between or their number.

This tutorial deals exclusively with the patterns that the screen designer makes available to the browser as comparison patterns when creating a Web form.

Tutorial

pattern maker

A small guide for understanding and writing patterns for HTML5 forms.

It makes no claim to accuracy and completeness.

Training

model pupil

Do-it-yourself input patterns.
A couple of workouts. Step by step to the pattern maker.

Sample book

Sample collection

Input pattern in prefabricated construction. A growing collection of patterns for HTML5 forms.

Examples from real life. With explanations. To copy and as templates for further development.

Social Media

multipliers

Follow - like it - love it - use it.

  

privacy policy

Legal Notice