Use Javascript to verify 10 digit phone number

Question

I've got some Javascript code that is trying to verify an entered phone number actually consists of 10 digits, regardless of format. It doesn't seem to be working.

I used similar Javascript code to verify an email address entry, and it worked.

Here is the HTML and JS for the phone number:

Phone Number

            <input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br>
            <script>
                var number = document.getElementById("phone_number");
                function validateNumber(val) {
                    var re = /^\d{3}-\d{3}-\d{4}$/;
                    console.log(re.test(val))
                    return re.test(val);
                }

                function validate_number() {
                    if (validateNumber(number.value.replace(/\D/g,""))) {
                        document.getElementById("phone_number_valid").style.visibility = "visible";
                        document.getElementById("phone_number_valid").style.height = "initial";
                        document.getElementById("phone_number_invalid").style.visibility = "hidden";
                        document.getElementById("phone_number_invalid").style.height = "0";
                    } else {
                        document.getElementById("phone_number_invalid").style.visibility = "visible";
                        document.getElementById("phone_number_invalid").style.height = "initial";
                        document.getElementById("phone_number_valid").style.visibility = "hidden";
                        document.getElementById("phone_number_valid").style.height = "0";
                    }
            </script>
            <div id="phone_number_invalid" class="error_verify">
                <p style="color:red">Invalid phone number.</p>
            </div>
            <div id="phone_number_valid" class="error_verify">
                <p style="color:green">Valid phone number.</p>
            </div>

And here is the related CSS:

.error_verify {
    visibility: hidden;
    height:0;
}

Answer 1

You call validateNumber with the input, with all non-digit characters removed:

if (validateNumber(number.value.replace(/\D/g,""))) {

So, your regex, which contains dashes, definitely won't match:

var re = /^\d{3}-\d{3}-\d{4}$/;

Since you don't care about the format at all, it sounds like all you need to check is whether there are exactly 10 digits in the phone number. Either change your regex to just 10 digits:

var re = /^\d{10}$/;

Or, even easier, just check whether the number of digit characters is 10:

if (number.value.match(/\d/g).length === 10)) {

 const numInput = document.getElementById("phone_number"); const validDiv = document.querySelector('#phone_number_valid'); const invalidDiv = document.querySelector('#phone_number_invalid'); function validate_number() { if ((numInput.value.match(/\\d/g) || []).length === 10) { validDiv.style.visibility = "visible"; validDiv.style.height = "initial"; invalidDiv.style.visibility = "hidden"; invalidDiv.style.height = "0"; } else { invalidDiv.style.visibility = "visible"; invalidDiv.style.height = "initial"; validDiv.style.visibility = "hidden"; validDiv.style.height = "0"; } }

 <input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br> <div id="phone_number_invalid" class="error_verify"> <p style="color:red">Invalid phone number.</p> </div> <div id="phone_number_valid" class="error_verify"> <p style="color:green">Valid phone number.</p> </div>

Answer 2

You can use the answer above but set default value to your input as base. This way you will show your users how their input should look like and also will fix the problem with the empty array.

So using the answer of CertainPerformance just amend this part:

<input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br>

to look like that:

<input type="text" name="phone number" id="phone_number" oninput="return validate_number()" value="1234567890"><br><br>