HTML pattern matching not working

Question

I have an <input> element with pattern validation.

<input type="text" id="some" pattern="^[A-Z]{5}$" name="some" maxlength="5" style="text-transform:uppercase" required/>

The pattern matching works if a user inputs all uppercase characters but fails if any is lowercase. Why is pattern matching not considering style="text-transform:uppercase" ?

Answer 1

The text-transform is only a visual change, not a data change.

See the following example to debug the <input> :

 function debug() { let inpItem = document.getElementById('some'); let inpValue = document.getElementById('some').value; //alert the actual value on input. console.log(inpValue); //set text-transform to default. inpItem.style='text-transform:none'; } 

 input { text-transform:uppercase; } 

 <button onclick="debug()">Debug</button> <input type="text" id="some" pattern="^[AZ]{5}$" name="some" maxlength="5" required/> 

How you can only input in uppercase?

You can use JavaScript to set all input values to the uppercase value.

 function debug() { let inpItem = document.getElementById('some'); let inpValue = document.getElementById('some').value; //alert the actual value on input. console.log(inpValue); //set text-transform to default. inpItem.style='text-transform:none'; } 

 <button onclick="debug()">Debug</button> <input type="text" id="some" pattern="^[AZ]{5}$" name="some" maxlength="5" onkeyup="javascript:this.value=this.value.toUpperCase();" required/> 

Answer 2

Pattern ignores text-decoration: uppercase; because it's only styling and original text is still formatted in the way it was inputted.

You should change your pattern to check both uppercase and lowercase symbols.

^[A-Za-z]{5}$

Answer 3

我不知道为什么会发生这种情况，也许在将样式赋予输入文本之前处理模式，但我看到你正在尝试创建一个模式来接受最多五个拉丁字符（大写或小写，因为你将它们全部改为大写），那你为什么不在你的模式中添加小写字母呢？

pattern="^[A-Za-z]{5}$"

Answer 4

只有连续5个大写字母才能使用你的正则表达式，你可以在这里查看http://regexr.com