HTML pattern matching not working -


i have <input> element 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 user inputs uppercase characters fails if lowercase. why pattern matching not considering style="text-transform:uppercase"?

the text-transform visual change, not data change.

see following example debug <input>:

function debug()  {    let inpitem = document.getelementbyid('some');    let inpvalue = document.getelementbyid('some').value;        //alert actual value on input.    console.log(inpvalue);        //set text-transform default.    inpitem.style='text-transform:none';  }
input {    text-transform:uppercase;  }
<button onclick="debug()">debug</button>  <input type="text" id="some" pattern="^[a-z]{5}$" name="some" maxlength="5" required/>

how can input in uppercase?

you can use javascript set input values uppercase value.

function debug()  {    let inpitem = document.getelementbyid('some');    let inpvalue = document.getelementbyid('some').value;        //alert actual value on input.    console.log(inpvalue);        //set text-transform default.    inpitem.style='text-transform:none';  }
<button onclick="debug()">debug</button>  <input type="text" id="some" pattern="^[a-z]{5}$" name="some" maxlength="5" onkeyup="javascript:this.value=this.value.touppercase();" required/>


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -