Input form (numbers) 'invalid' requirements?

[drone4four]

Hello CSS warriors!

Chris Coyier has a terrific guide demonstrating how to present invalid input for HTML forms. Here it is: https://css-tricks.com/form-validation-ux-html-css/

And here is the Pen that Chris refers to in his guide: https://codepen.io/chriscoyier/pen/JXgKjb?editors=1101

I’ve attempted to adapt that Pen to fit the context of my project. In my project, rather than filtering email and password input, I wish to require that the number entered into my form is precisely 16 digits long and for the browser to prompt the user if the input entered is greater than or less than 16 digits.

Based on Chris’ Pen and explanation, I realize that the ‘pattern’ element is a form of regex which can restrict the types of acceptable character input. To ensure a password be “at least 6 characters as well as contain at least one uppercase, one lowercase, and one number”, Chris uses: (?=.\d)(?=.[a-z])(?=.*[A-Z]).{6,}. I think this is really neat. I don’t understand all of it. In my case, all I need the last expression: {6,}. That specifies a minimum of 6 characters. So I figure I need: “{16,16}” to require a min of 16 characters and a max of 16. Amiright? This is what I have placed for my pattern element (see my pen below) however my element is “number” not “password”. To require 16 digits as input and to show an ‘invalid’ message, what do I need to use for the pattern element for numbers instead of password?

Here is my adapted Pen: https://codepen.io/Angeles4four/pen/KJZabo

There is probably another way to achieve the same result using JavaScript, but my preference is for pure HTML/CSS.

Other issues with my Pen include “margin: auto” for both h3 and body tags which aren’t parsing. Most of Chris’ other styles aren’t parsing either, including font and the colors. I am overlooking something trivial here. Anyone care to clarify?

[drone4four]

Maybe my question was less clear than it could have been. Re-phrased in a different way, what I was wondering about is: When a user enters anything other than 16 digits into a number input fieled for an HTML form, what is the regex code to show a pop-up explaining these requirements?

[drone4four]

The answer to my main question (the one about regex) is: [0-9]{16} is the code I need. I also did away the number type. I’m using the password type. So my input tag and element now look like this: “

To answer my other question, the reason why my CSS wasn’t parsing is because it was raw scss. I needed to compile it to regular CSS.

My Pen showing everything working as it should can be found here: https://codepen.io/Angeles4four/pen/vbbWBv?editors=1100

The issues have been resolved.

[Author]

Posts