How to use the Pattern attribute with regular expression correctly?

Question

I’d like to use one pattern in my input (has to be the text) with the following rules:

• Input only accepts up to 4 characters.
• These characters can only be numbers from 0 to 9.
• User CANNOT start typing 0. Ex:
  • 0100, 0001, 0050 (Not allowed)
  • 1020, 1000 (May).

I started doing the following code below, but it’s not working very well.

<input class="form-control" type="text" id="cod" name="cod" pattern="[0-9]+$" maxlength="4" placeholder="Digite o código da empresa(Somente números)" required autofocus />

But it didn’t work. (In this case of my code, I couldn’t even stop the field from receiving only numbers).

OBS: I would like to use only the pattern input, without Javascript or jQuery.

Answer 1

You can use the pattern equal to ^[1-9][0-9]{0,3}$:

/* deixar borda vermelha enquanto o campo for inválido */
input:invalid {
  border: red 1px solid;
}

<form>
  <input type="text" pattern="^[1-9][0-9]{0,3}$" maxlength="4" placeholder="Digite o código da empresa(Somente números)" required />
  <input type="submit" value="ok">
</form>

The markers ^ and $ are respectively the beginning and end of the string. So you ensure that the field will only have what is specified in regex.

Next we have the character class [1-9], which corresponds to a digit from 1 to 9. This ensures that the first digit cannot be zero.

Then we have [0-9]{0,3}: from zero to three digits from 0 to 9.

That is, the field can have 1 to 4 digits, and the first cannot be zero. With this, the field does not accept values such as 0100 and 0999, but accepts 1010, 2999, 1, 12, 999 etc. See here some examples of this regex in operation.

---

Remembering that the attribute pattern will not prevent the user from entering invalid information. IE, the user can type "abcd", and the pattern will be used to verify that what was typed corresponds to regex (and if it is, the form can be submitted).

Answer 2

DEFINITION OF USE

The attribute pattern specifies a regular expression where the element value <input> is checked when sending the form.

TIP

Use the global title attribute to describe the pattern to help the user.

NOTE

The default attribute works with the following input types: text, date, search, url, tel, email and password. Learn more about regular expressions in our Javascript tutorial.

SYNTAX

<input pattern="regexp">

WHERE regexp

Specifies a regular expression in which the widget value <input> is verified.

An example where, an element <input> with type = "password" which must contain 6 characters or more:

<form action="/action_page.php">
    Password: 
    <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
    <input type="submit">
</form>

REGULAR EXPRESSION FOR YOUR USE CASE

1) [0-9]{4} :Where it takes digits from 0 to 9 and only four of them

2) ^[0] :Where it takes the corresponding zero digit from the beginning of the line

Now I leave you this site, for you test the regular expressions separately and be able to understand what is occurring, I also leave you a challenge for you to be able to unite the same, thus achieving your business rules of your use case.

ORIGINAL SOURCE - W3SCHOOLS