FAQ: Learn HTML: Form Validation - Matching a Pattern


#1

This community-built FAQ covers the "Matching a Pattern " exercise from the lesson “Learn HTML: Form Validation”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction to HTML

FAQs on the exercise _Matching a Pattern _

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

In this exercise, we set pattern attribute it to: "[a-zA-Z0-9]+" so that only numbers and alphabets are valid in the input. What does ‘+’ in ‘[a-zA-Z0-9]+’ do?


#3

+ Matches the preceding expression 1 or more times. Equivalent to {1,} .

For example, /a+/ matches the ‘a’ in “candy” and all the a’s in “caaaaaaandy”, but nothing in “cndy”.


#4

I’ve had a look at MDN’s Regular Expressions page (suggested in this exercise if we want to find out more). I notice that the information here is based on regex in JavaScript. Can all of the same special characters and their different combinations (as shown in the examples on this page) be used in HTML5 (as the pattern attribute’s "value") with the same meanings that they have in JavaScript? This post What is a regular expression? that I found says:

Below, is a link to a page on HTML.com with some explanations and examples of regular expressions that can be used with the pattern attribute, which I found easier to understand. It also explains really well why regular expressions should be used with caution, otherwise they can cause more problems than they solve.
https://html.com/attributes/input-pattern/
Could someone explain what the d. (lowercase d followed by a full stop) means in the second example for Username Patterns on this page? :thinking:


#5

No. We need a script environment to access the regex engine.


#6

So, if we’re just using HTML5 (without a JavaScript environment), would it be best just to stick to the examples on https://html.com/attributes/input-pattern/, or a regex list specific to HTML5, rather than refer to MDN’s Regular Expressions for JavaScript page?

There definitely seems to be some overlap though…?


#7

D’oh!

pattern="[A-Za-z0-9]+"

Says it all.

allows you to add basic data validation without resorting to JavaScript.

Time for a refresher…


#8

Are the regular expressions that will work with HTML’s pattern attribute just a reduced selection from those available in JavaScript? Or can we literally just lift any of JavaScript’s regex and insert them into pattern="value"?


#9

The engine is outside of the ECMAScript domain. It goes way back in time and has been rigid enough to make every other API come to it.


#10

@discobot
Can some one explain what does “[0-9]{14,16}” and [a-zA-Z0-9]+ mean


#11

The square brackets denote a class which is akin to a set of all digits 0 thru 9 inclusive. The curly braces denote a character count, above that would be minimum 14, maximum 16.

Again, this is a class that contains all the lowercase letters a thru z, all the uppercase letters A thru Z and all the digits 0 thru 9. The plus sign means one or more times.


#12

one more query. what would be validation pattern if we to include a special character to be used condition


#13

Can you give an example? By ‘special character’ are you referring to escapes or something like the @ character?


#14

Can you tell me the pattern for both “escape” and “@,!”
Thanks


#15

In a regex, ‘special characters’ are those that symbolize a particular class, such as \s for whitespace characters, \w for word characters, or \? for an actual question mark, \* for an actual asterix, since ? and * (among others) are also special characters.

The @ character can be used directly in the pattern without escapement. It is not special at all since it has no meaning apart from being a printable character.

The lesson should have link in the narrative to a table of regex special characters and their meanings.


#16

Hey mtf, just to be sure I understand before I move on… so the + allows you to use the same character more than one time? So if I didn’t have the"+", does that mean it would expect the input field to be composed of all different characters? What happens if you leave the “+” off? I think I’m feeling insecure about this because the example for the number input -[0-9]{14,16}- field did not have a “+” behind it


#17

@mtf can correct me if I’m wrong, but here’s my understanding:

It means you can repeat the preceding character (or more usually, class of characters defined within square brackets) once, or more than once i.e. [a-zA-Z0-9]+ means that you can have any combination of letters (both lower case and capitals) and numbers any number of times (except zero - you can’t leave the field blank). Notice that this means you could enter the same letter/number as many times as you want, either by only using this one character, or in any combination with any other characters that are allowed within our defined class.

e.g. The following would be allowed:

111111111111111
AaAaAaAaAaA
A
1a2a3B4B5B6B5B4B3Z21

The regex [0-9]{14,16} means that we can repeat any combination of numbers (the class defined within the square brackets) a minimum of 14 times and a maximum of 16 times (i.e. 14, 15 or 16 times). There isn’t a + because we have defined a more specific character input number within the curly brackets.

To clarify, here are some examples using the same defined class of characters [a-zA-Z0-9]

[a-zA-Z0-9]{5,15}
means any combination of letters or numbers with a length of between 5 and 15 characters (no more, no less).

[a-zA-Z0-9]+
means any combination of letters or numbers of unlimited length, but you can’t leave the field blank (i.e. 1 or more)

[a-zA-Z0-9]*
using * means the same as using + and in addition you could leave the field blank
(i.e. you have to use the defined character class 0 or more times)

I’m not sure what would happen if you didn’t include anything after the class definition e.g. just [a-zA-Z0-9]. Why don’t you try it out and see what happens? I’m finding that I’m learning a lot by testing code using trial and error. I’ll try it out too and get back to you with my discovery. If neither of us can work it out, then maybe @mtf can clarify :wink:


#18

@annageminn @mtf

I’ve had a play with this and it seems to default to an input constraint of 1 character, equivalent to {1,1} i.e. it allows an input of any single lower or upper case letter, or any single number, but It doesn’t allow leaving the field blank, or an input of 2 or more characters.


#19

I also played around with it, and have discovered that we can eliminate the minlength and maxlength attributes in the input element (in the exercise), in exchange for {3,15} at the end of the pattern attribute.

So:

<input id="username" name="username" type="text" required minlength="3" maxlength="15" pattern="[a-zA-Z0-9]+">

…will give the same result as:

<input id="username" name="username" type="text" required pattern="[a-zA-Z0-9]{3,15}">