Welcome to WebmasterWorld Guest from 54.226.25.74

Forum Moderators: open

html 5 regex

html 5 regex validation

     
8:42 pm on Nov 13, 2018 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Feb 11, 2010
posts: 142
votes: 2


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?
8:48 pm on Nov 13, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2302
votes: 612


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...]
9:20 pm on Nov 13, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15373
votes: 724


<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 ::
1:44 am on Nov 14, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2302
votes: 612



<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.
3:53 am on Nov 14, 2018 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:11521
votes: 177


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
11:46 am on Nov 14, 2018 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2835
votes: 148


@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.
5:07 pm on Nov 14, 2018 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Feb 11, 2010
posts: 142
votes: 2


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.
6:00 pm on Nov 14, 2018 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2835
votes: 148


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.
6:32 pm on Nov 14, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15373
votes: 724


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.)
7:34 pm on Nov 14, 2018 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Feb 11, 2010
posts: 142
votes: 2


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.
9:07 pm on Nov 14, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15373
votes: 724


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.
5:54 am on Nov 15, 2018 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Feb 11, 2010
posts: 142
votes: 2


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.