Svelte: Input does not validate correcetly according to pattern when the pattern contains numbers

[juniorsd]

<input bind:value='number' placeholder='enter a number' pattern='^[0-9]{1,3}$'>

The above input does not accept input that is valid according to the regex pattern.
An equivalent code validates as expected in pure HTML and in other frameworks like Inferno.

<form onsubmit="alert('ok')">
  <input placeholder='enter a number' pattern='^[0-9]{1,3}$'>
</form>

[Conduitry]

This is expected - {1,3} is being interpreted as a tag, which then is a javascript expression 1,3 which evaluates to 3. If you want to have something that looks like a tag, you can escape the { as {.

[juniorsd]

You are right.
<input bind:value='number' placeholder='enter a number' pattern='^[0-9]&#123;1,3&#123;$'>
While ugly, the above validates correctly.
Thank you very much.

[lagden]

@juniorsd
you can use String.raw

Example:

<input type="text" name="cpf" pattern="{String.raw`\d{3}.\d{3}.\d{3}-\d{2}`}" required>

Output is:

<input type="text" name="cpf" pattern="\d{3}.\d{3}.\d{3}-\d{2}" required="">