'HTML phone number validation

I am working on an HTML website and I am a little stuck in one situation.

The client wants to add phone numerical numbers only, without alphabetic characters with the condition that the phone number field should be accepted and submit phone number if someone enters +91 in front of 10 digit phone number (i.e +917894561236) and if he didn't add +91 the field should also accept 10 digit phone number but not less than 10 numbers.

Here is my html:

<div class="form-group">
  <label for="">Phone number *</label>
  <input type="text" class="form-control" minlength=10 required name="phone_m" id="phoned"
         placeholder="Enter Your Phone Number" pattern="^(\+91[\-\s]?)?[0]?(91)?[6789]\d{9}$"
         oninput="if (typeof this.reportValidity === 'function') {this.reportValidity();}" / >
</div>

The below jQuery script is used to remove alphabets from phone field, however adding type="tel" in input field dosn't stop users to type alphabets

<script>
//to get only numeric values in phone number field
jQuery('#phoned').keyup(function () { 
    this.value = this.value.replace(/[^0-9+\.-]/g, '');
});
</script>
javascriptphphtmljquery


Solution 1:[1]

As per my comment above, try this:

<div class="form-group">
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="+910123456789 or 0123456789" pattern="[+0-9]{10,13}">
</div>

You can test Regex here: https://regex101.com/

function displayInputValue() {
  console.log(document.querySelector("input[type='tel']").value)
}
<div class="form-group">
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="+910123456789 or 0123456789" pattern="[+0-9]{10,13}">
  <button type="button" onClick="displayInputValue()">Show Value</button>
</div>

Solution 2:[2]

I wrote and used this function for my client, it formats while they type it, and actually check if the char entered is numerical, trims the lenght as well. Well the format they wanted is "XXX-XXX-XXXX" but I am sure you can mod my code to suite your needs. The regex is not perfect but if they copy and past s*** it will stop them from submitting.

document.getElementById("phone").onkeyup = function()
{
    const CHAR_AMOUNT = this.value.length;
    // Check each character as the user types it, do not exceed the format we want of "XXX-XXX-XXXX".
    if (CHAR_AMOUNT < 13)
    {
        // Get the position of the last char, and check if the string has at least 1 char.
        // THAN get the last character typed by the user and check if it is a valid numerical type, if not, get rid of it.
        const LAST_CHAR_POS = CHAR_AMOUNT - 1;
        if (LAST_CHAR_POS >= 0)
        {
            const LAST_CHAR = this.value.charAt(LAST_CHAR_POS);
            if (isNaN(LAST_CHAR))
            {
                this.value = this.value.slice(0, -1);
                return;
            }
        }
        // Here we auto fill the '-' char after the 3rd and 7th digit of the phone number.
        if ((CHAR_AMOUNT === 3) || (CHAR_AMOUNT === 7))
        {
            this.value += "-";
        }
    }
    else // Trim any excess characters on the phone number. including if someone is copy and poaste a long string.
    {
        this.value = this.value.slice(0, (12 - CHAR_AMOUNT));
        // Ho well, if they copy past garbadge, let the HTML pattern stop them from submitting (-_-).
    }
    return;
};
<input type="tel" id="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890" title="Must be XXX-XXX-XXXX" required />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dominick

Related Questions