Contact number in HTML Form-CodePudding

if we uses "tel" in input then we can give max or min length for the input but its drawback is it may take all kind of inputs whether it is numeric or alphabets,

And if we uses "number" for input then it takes only number but we can not give it min-max characters limit.

Even though I have mentioned pattern inside it but no change. So is there any alternate for the same to give max-min length and can take only numeric?

<div >
    <label for="exampleFormControlInput3">Mobile Number</label>
        <div >
           <span  id="basic-addon1"> 91</span>
               <input type="tel"  id="exampleFormControlInput3" maxlength="10" placeholder="012-345-6789" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
        </div> 
 </div>

Note: I have used bootstrap5 for the same.

CodePudding user response：

You using input type tel and can make a mix with javascript if you want avoid completely alphabetic characters. The type tel provides pattern to but it validate afterwards. And not every browser will supported.

<label for="phone">Enter your phone number:</label>

<input type="tel" id="phone" name="phone"
       maxlength ="6"
       pattern="[0-9]{3}-[0-9]{3}"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
       required>

<small>Format: 123-456</small>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

CodePudding user response：

Semantically using type="number" is incorrect. You should be only using type='tel'. If you want fine control over what the user inputs, you should be using a pattern for that.

<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>

Read this doc, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel