Explanation on characters in the <input> pattern attribute?

Can anyone explain the character spaghetti that is the pattern attribute?? I am working on the Build A Survey Form project and I would like to understand this. I am seeing $ at the end of some things. Does that just show you are a friggin rocket-surgeon making dat cash money!!! The bit of Googling I have done gives you patterns but nothing explains it in much detail. I still need to limit numbers one could enter into a number type input…

Figured I would try to make a text box use only A-Z. When I try to enter a name I get a message saying that it doesn’t match the requested format.

The pattern attribute uses a regular expression. You will learn more about them in the JavaScript section of the curriculum (https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/regular-expressions).

Do you have a specific pattern you do not understand?

The last pattern I need for this project is “User Story #9: If I enter numbers outside the range of the number input, I will see an HTML5 validation error.”

I saw that one can set a character count but not a max or min.

Read the following section from the MDN documentation on Form Validation. You can use
type=“number” and min and max attributes to restrict numbers outside a specific range on an input element.

1 Like

This passes the test, but not in the way I was intending. I tried minlength=“9” and maxlength=“9” and those seemed to not work. Maybe only in text fields like in the example??

Did you try min and max instead of minlength and maxlength? You want to restrict the range of values entered, not the length of the values entered.

Yes. I wanted it to take a 9 character number. I put in just 9 which passed but isn’t exactly what I was looking for. Changed min=“111111111” and max=“999999999” and that seemed to get the desired result.

Thank you for your time!