0

I have this two inputs one of type text and the other number

<input type="number" class="form-control" id="phone" name="phone" placeholder="Telephone Number"  maxlength="10" pattern=".{10,}" required title="10 characters minimum"/>


<input type="text" class="form-control" id="names" name="names" placeholder="Names" pattern=".{5,30}" title="Minimum of 5 characters required"/>

the input text is able to respond when the user fills less than 5 characters but the type number does not respond when the input is less or greater than 10. It does respond however to the required rule.

How can i set the minimum characters for the input type number without having to result to javascript?.

  • Max in input type number define max number .not length of that number – Himesh Suthar Jun 25 '17 at 16:00
  • @HimeshSuthar I have found that but its the minimum length when input is number that is problematic. –  Jun 25 '17 at 16:03
  • Possible duplicate of [HTML5 input number min max not working with required](https://stackoverflow.com/questions/17872928/html5-input-number-min-max-not-working-with-required) – thepio Jun 25 '17 at 16:04
  • @thepio I am looking to accept a mimimum of ten numeric characters. –  Jun 25 '17 at 16:06
  • Use input type= text and put this regex . min digits 10 and max 15 pattern="\d{10,15}" – Himesh Suthar Jun 25 '17 at 16:06
  • Really people, whoever marked this as duplicate ought to read the question tagged. –  Jun 25 '17 at 16:08
  • @HimeshSuthar That does not work on cordova. –  Jun 25 '17 at 16:10
  • Man u can compare it in using javascript. Fetch the value of this input and compare it with str.match("\d{10,15}"). If its true thn valid – Himesh Suthar Jun 25 '17 at 16:13
  • @HimeshSuthar I know i can solve it in javascript but i dont want to use javascript for now. Thanks for the suggestions though. –  Jun 25 '17 at 16:15
  • https://www.google.co.in/url?sa=t&source=web&rct=j&url=https://stackoverflow.com/questions/19066674/why-is-input-pattern-attribute-not-working-for-numerics&ved=0ahUKEwi8lv7AstnUAhVBKY8KHTdNBssQFggfMAA&usg=AFQjCNF_tRneM8gkSySg87sm2HEJsOOvSA. Refer this – Himesh Suthar Jun 25 '17 at 16:18
  • @HimeshSuthar Its a long standing unsolved bug in cordova, no need of trying. problem can only be solved using javascript. –  Jun 25 '17 at 16:21
  • @jsjsjsjsjsjs there in my linked answer there is both pattern and min + max explained. Only thing I would add is a link to this site http://caniuse.com/ where you can see the browser support for stuff. – thepio Jun 26 '17 at 10:55
  • Really dude! Really! –  Jun 26 '17 at 11:05

1 Answers1

0

Maybe you could solve it with the min attribute of the input type number like min="1000000000".

be-ndee
  • 1,153
  • 3
  • 13
  • 19