1

I'm using jQuery to add a pattern attribute to a text field based on a letter I select from an array. I'm trying to restrict the values that text field can accept with a regex, but it doesn't work properly.

What I want is that the first char of the value must be the letter I choose of the array, and then don't accept more than 2 identical consecutive caracters.

My regex is this:

^["+letter+"](?!(.)\1).{2}.*

And it seems to work when I'm testing it in regexr.com, but when I test it in my page, just the part of match the 1st char works, and the rest don't. When I type something like "Aaaaron", the message of "invalid entry" doesn't show.

Thanks in advance.

Scott Weaver
  • 7,192
  • 2
  • 31
  • 43

2 Answers2

1

Description

^(.)(?!\1{2})

Regular expression visualization

This regex will do the following:

  • capture the first character
  • validate the first character is then not repeated 2 more times. If two more of the same character are present after the first occurrence, then you have 3 of the same characters in a row.

Note to make this expression view upper and lower case versions of a letter as the same character you'll need to use the case insensitive flag.

Live Example

https://regex101.com/r/xG9mE9/2

Explanation

NODE                     EXPLANATION
----------------------------------------------------------------------
  ^                        the beginning of a "line"
----------------------------------------------------------------------
  (                        group and capture to \1:
----------------------------------------------------------------------
    .                        any character except \n
----------------------------------------------------------------------
  )                        end of \1
----------------------------------------------------------------------
  (?!                      look ahead to see if there is not:
----------------------------------------------------------------------
    \1{2}                    what was matched by capture \1 (2 times)
----------------------------------------------------------------------
  )                        end of look-ahead
----------------------------------------------------------------------
Community
  • 1
  • 1
Ro Yo Mi
  • 14,790
  • 5
  • 35
  • 43
1

try this regex: (with letter being 'a')

$("form").find("input[type=text]").attr("pattern", "(?=[Aa])(?!.*(.)\\1\\1).*");

it validates the starting letter, and that no character appears more than 2 times consecutively:

jsfiddle

notes:

  • you can't do case insensitive matching with HTML5 pattern attribute, so 'a' and 'A' are not the same thing ('Aaaron' isn't 3 a's in a row)
  • if adding pattern via a string (not a regex literal) in jquery/javascript, remember there's string interpolation first and then regex interpolation second (the backslash means something to String as well to Regex, you might need to double escape them: (\\1 for a backreference in this case)
  • you don't need ^ or $ to make the input value match the entire pattern only, the regex is wrapped in ^(?:regex)$ for you. This means that if your pattern does not consume the entire string it will not work: (?=[Aa])(?!.*(.)\\1\\1), which are just a couple of lookarounds, and would normally validate the input just fine, is a zero-width pattern, and without the .* at the end, does not work.
Community
  • 1
  • 1
Scott Weaver
  • 7,192
  • 2
  • 31
  • 43
  • Still not showing the message of invalid entry, but this seems to be the right regex. Do you know what could be the cause? I'm using the HTML5+CSS3 validator (input:valid, input:invalid), but the message only shows when I type a wrong letter at first, but not when I type consecutive identicals. – André Villanueva Escarela May 16 '16 at 23:17
  • can you create a https://jsfiddle.net/ illustrating the bug? (you can add jquery as external lib) – Scott Weaver May 17 '16 at 01:39
  • Now the message is displayed even if I type a valid string :( – André Villanueva Escarela May 17 '16 at 03:11
  • got it. you need to double escape the backreferences `\\1` to allow them to get through the string processing and the regex processing. – Scott Weaver May 17 '16 at 03:46