Unknown cause error: "Syntaxerror: invalid range in Character class"

Question

Situation:

I have a page that contains a <iframe> another, on this other page, I have a simple HTML element input:

<input type="text" required="" pattern="[a-Z]{2,35}" tabindex="6" name="edtCidade" id="edtCidade">

I am sure and have made sure that there is no event assigned to it or code changing its properties.

However, every time I type, any key, can be number, can be letter, anything, every time I type generates this error in the console:

Syntaxerror: invalid range in Character class

Example:

If I type "az123" I will have 5 errors SyntaxError in my browser console.

Important:

This mistake does not cause me any problem, it is insignificant but it is bothering me, and I would like to know the origin of it.

Question:

How to resolve this error? Why is it occasioned? I would like a detailed explanation.

Answer 1

The error is associated with regular expressions, being caused by the range a-Z (a lowercase and Z uppercase) in the attribute pattern.

Like the attribute pattern is an element of input included in the HTML5, the expression will be executed even without any plugin or additional event.

To accept uppercase and lowercase letters, use [a-zA-Z], because there seems to be no way to make the pattern case insensitive.

Note: in Chrome does not occur this exception, it just ignores the validation. I imagine, then, that you are using Firefox. :)

Demo at Jsfiddle

Answer 2

Regular expression lists are based on the ASCII table (http://www.asciitable.com/). According to this table, a is character number 97 and Z is the character number 90 - because of this, it makes no sense for you to write a list that says "here are valid all characters between 97 and 90" (the first number must be less than the second).

The common thing is to do [a-zA-Z0-9_]+ or, simply, \w+. To validate only numbers use [0-9]+, or \d+.

Answer 3

Is a regular expression error.

[a-Z]{2,35} não é vlálido  
Use [a-zA-Z]{2,35}

Try to use

<input type="text" required="" pattern="[a-zA-Z]{2,35}" tabindex="6" name="edtCidade" id="edtCidade">