html 5 regex

html 5 regex validation

[typomaniac]

I always use server side validation to make for certain but for user convenience, I have used javascript (which, by the way, I'm not a writer of) but have decided to just use html 5 for some forms. I found a regex that is good for requiring a lower & upper case character, numerical character and special character as well as minimum and maximum amount that seems to work pretty good. The problem is, the passwords for the situation I'm in require 2 of each lc, uc, num and special chars. In Perl or PHP the regex works by simply adding the amount needed for each char but finding it doesn't work for me with html 5. The input field is as follows:

<input type="password" id="password" name="password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@$!%*?&])[A-Za-z0-9@$_!%*?&-]{8,20}$" />

Any ideas?

[NickMNS]

I don't have a specific answer but I can recommend this site for helping with the writing and finding error in your regex
[regex101.com...]

[lucy24]

<tangent>
Is it really safe to put this pattern right there in the visible html where any passing robot can see it?
</tangent>

(?=.*[a-z])

Can’t each of these bits simply be replaced by

(?=.*[a-z].*[a-z])

if the object is to find at least two of each? Or does your RegEx engine not accept that syntax?

:: wandering off in a happy daze because I had no idea html5 + regex was even a thing ::

[NickMNS]

<tangent>
Is it really safe to put this pattern right there in the visible html where any passing robot can see it?
</tangent>

How is knowing the pattern a problem. Any entry not matching the pattern will be invalid an will prevent the form from being submitted. I many cases you probably explain to the user what is expected / isn't allowed. That said, one shouldn't rely on HTML5 form validation as there may be ways around it. Such as manually creating the form in JS and then submitting it directly to the endpoint. So one should maintain server side validation. The benefit is that it save server requests with invalid form entries (robots) and it allows users to respond immediately to data entry errors without requiring a round trip to server.

[phranque]

Or does your RegEx engine not accept that syntax?

the pattern should be a javascript regular expression [developer.mozilla.org]

see https://html.spec.whatwg.org/multipage/input.html#attr-input-pattern

[graeme_p]

@Nick if robots cannot see the pattern they are likely to try invalid passwords (particularly with the unusual requirement here of two of each instead of one of each) which might block their registration attempts.

No idea who much impact it would have, but its not impossible it might make a difference.

[typomaniac]

Concerning password hack attempts, the passwords for this script include two of each: lower case, upper case, numerical, and special chars, minimum of 12 and ultimately no two chars one after the other and words. I know that sounds like alot, but it's what it is. Also, if you give all the inputs names that don't sound likely, eg; don't use name="password", etc but name ="something else". Also something I've found works pretty good and have never had problems with, instead of captcha, I add invisible fields. That is in css I add a "div_name{display:none;} and then in the form you simply add the inputs using the name password, etc. for the input name and hide them under the invisible div. When it comes to the script, if that field isn't empty you can re-direct them to a spam site or something and stop processing of the form.
I'm only looking for a client side validation for the visible fields for user convenience.Everything ultimately goes through server side in case js is turned off in the user's browser. I'm not a javascript writier, which maybe its high time I learn a little but html 5 does a similar validation. It don't really matter if the bots read the pattern but so far any attempts have been rebuked by the invisible fields they fill out.

[graeme_p]

instead of captcha, I add invisible fields. That is in css I add a "div_name{display:none;} and then in the form you simply add the inputs using the name password, etc. for the input name and hide them under the invisible div. When it comes to the script, if that field isn't empty you can re-direct them to a spam site or something and stop processing of the form.

I do that too sometimes. It works as well as captcha and is not as annoying for users. In this case it probably means that bots are unlikely to be able to make use of the revealed data.

i am not a fan of such strong password rules though. It only encourages people to reuse, note down, etc.

[lucy24]

Did you try the
(?=.*[a-z].*[a-z])
option? Neither of the pages phranque linked to goes into narrow detail about what's permitted in a lookahead. (They never do; you have to find it by trial and error.)

[typomaniac]

Lucy, what you showed works great for text but I need to make sure 2 of each of the types of chars are in. I'm going to search out what Phranque mentioned. Trial and error is a great teacher. Graeme, it is easy enough to stop people from reusing old passwords. Its also not that hard to remember a good password when you think of all the other things you've learned in life.

[lucy24]

I need to make sure 2 of each of the types of chars are i

Oh, sorry. I assumed you would see that the pattern is meant to be used as an analogy, repeated mutatis mutandis for each character type: \d.*\d and so on.

[typomaniac]

Sorry 4 missing what you were saying Lucy. Was gong to use the excuse I was tired and missed it but I'll be honest and admit I wasn't paying attention. Thanks for the clarification.