0

I want to get mobile number as input of different countries. I tried using below code:

<input type="tel" minlength="8" maxlength="10" name="Number" id="Number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" class="form-control wow fadeInUp" placeholder="* WhatsApp Number" required/>

But it also accepts characters, so how can i apply length validation and number validation.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Vishal Kamlapure
  • 590
  • 4
  • 16
  • It applies both. If you type a character and leave the field, the element's `validity.valid` property is set to `false`, its `validity.patternMismatch` property is set to `true` and the CSS pseudo-class `:invalid` is enabled. – Heretic Monkey Sep 11 '20 at 20:10
  • what should be my pattern, cause with this pattern numbers are not getting accepted ? – Vishal Kamlapure Sep 11 '20 at 20:15
  • If you click Run code snippet, you'll see you can type numbers in there all you want. – Heretic Monkey Sep 11 '20 at 20:28
  • 1
    Does this answer your question? [Input text field that only accepts numbers AND the dash character](https://stackoverflow.com/questions/19785288/input-text-field-that-only-accepts-numbers-and-the-dash-character) – Heretic Monkey Sep 11 '20 at 20:46
  • 1
    Arguably it should accept the `+` character as it is the standard for indicating an international dialing code. EXTENSIVE discussion here: https://stackoverflow.com/questions/15745545/is-there-a-standard-for-phone-numbers – pilchard Sep 11 '20 at 21:02
  • @HereticMonkey That js code doesn't accept + or ( ). – Vishal Kamlapure Sep 11 '20 at 21:24
  • I have specified that i want to accept different countries mobile numbers so that does include + and ( ) . – Vishal Kamlapure Sep 11 '20 at 21:44

1 Answers1

1

this code will prevent character to be typed. While typing anything except numbers are omitted.

<input type="tel" required minlength="8" maxlength="15" name="Number" id="Number"  class="form-control wow fadeInUp" placeholder="* WhatsApp Number" oninput="this.value = this.value.replace(/[^0-9+()]/g, '');" pattern=".{8,10}" placeholder="123-45-678" />
ANIK ISLAM SHOJIB
  • 3,002
  • 1
  • 27
  • 36