1

I have this pattern for an input text field: /[\p{L}\'.\- ]{3,30}/ My intention is to accept the most broadly names of people on several alphabets of the world (Latin, Cyrillic, Chinese, etc.) It was tested in Regex101 and it works great. On other testers it doesn't work but my main issue comes as follows:

<form action="mailto:myemail@emailserver.com" id="formula" method="post" enctype="multipart/form-data" 
name="formname" class="form-group pt-3" autocomplete="on" ng-submit="register()" novalidate>
<input type="text" name="nombre" ng-pattern="/[\p{L}\'.\- ]{3,30}/">

Here's my code for you to check: https://regex101.com/r/gOvO2M/8 It skips special characters, skips symbols, skips numbers, but when I see the live HTML in the browser, it doesn’t work properly.

In the error message, for validation purposes, I put:

<p class="formu-error" ng-show="formname.nombre.$touched && formname.nombre.$invalid">Please, write a valid name.</p>

The problem is when testing, I write only letters (no spaces, no hyphen because all that is optional) and still giving me the message of the error. Why?

Maybe because I am using \p{L} and that will work only in the server, when I code the server validation in PHP?

TylerH
  • 20,799
  • 66
  • 75
  • 101
limakid
  • 71
  • 11
  • Try `ng-pattern="/^[\p{L}'. -]{3,30}$/u"` and I suggest adding `ng-trim="false"`. – Wiktor Stribiżew Apr 15 '21 at 11:12
  • @WiktorStribiżew, thx, it‘s working fine in the html form (which is saved as php). However, it still accepting lots of spaces at the begining. I want to allow spaces between a first name or a last name for example, but not extra spaces at the begining. Shoud I better implement it on the server using PHP trim function? I didn‘t really understand what is the `ng-trim="false"` will work exactly. I just knew that it will not trim spaces automatically, but I didn‘t find videos to explain clearly. – limakid Apr 15 '21 at 18:27
  • 1
    If you do not want to allow spaces at the start and end you need `ng-pattern="/^\p{L}[\p{L}'. -]{1,28}\p{L}$/u" ng-trim="false"`. Or if you need to disallow consecutive spaces and apostrophes - `ng-pattern="/^(?=.{3,30}$)\p{L}+(?:['. -]\p{L}+)*$/u" ng-trim="false"` – Wiktor Stribiżew Apr 15 '21 at 18:36

1 Answers1

0

You can use

<input type="text" name="nombre" ng-pattern="/^(?=.{3,30}$)\p{L}+(?:['.\s-]\p{L}+)*$/u" ng-trim="false" />

Note the u flag, it enables the Unicode category (property) classes support in JavaScript with the ECMAScript 2018+ support.

Also, ng-trim="false" will prevent trimming whitespace before passing the input to the regex engine.

The regex means:

  • ^ - start of string
  • (?=.{3,30}$) - the string must consist of 3 to 30 chars other than line break chars
  • \p{L}+ - one or more Unicode letters
  • (?:['.\s-]\p{L}+)* - zero or more repetitions of
    • ['.\s-] - a ', ., whitespace or -
    • \p{L}+ - one or more Unicode letters
  • $ - end of string.

See the regex demo.

Wiktor Stribiżew
  • 607,720
  • 39
  • 448
  • 563