I am trying to get the value from an input box, validate & format the number, then update the input field.

I want it to validate all Australian phone numbers (mobile and landline) formatting mobile numbers to 04XX XXX XXX and Landline numbers to (0X) XXXX XXXX

var phone_number = $("#phone").val();
//validate mobile number
var formatted = phone_number.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
//replace number
$("#phone").val(formatted);

Any help would be awesome :)

I am trying to get the value from an input box, validate & format the number, then update the input field.

I want it to validate all Australian phone numbers (mobile and landline) formatting mobile numbers to 04XX XXX XXX and Landline numbers to (0X) XXXX XXXX

var phone_number = $("#phone").val();
//validate mobile number
var formatted = phone_number.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
//replace number
$("#phone").val(formatted);

Any help would be awesome :)

• javascript
• jquery
• regex
• validation
• formatting

• Hey Nick just wondering if you manage to find a way around this ? I am hoping to be able to find a jQuery based solution for this. – Gautam P Behera Commented Feb 6, 2017 at 17:23
• I ended up implementing the function I posted below... Like said below, not optimal, but not worth spending anymore time on – NickOS Commented Feb 7, 2017 at 3:23

3 Answers 3

You can use the same regex/replace logic you have suggested.

html

Mobile:<input id = "mobile" type = "tel" maxlength=8></input>
Landline:<input id = "landline" type = "tel" maxlength=10></input>

jquery

$("#mobile").blur(function(){
    var mobile_ele = $("#mobile");
    var mobileNum = mobile_ele.val();
    var formattedNum = mobileNum.replace(/(\d{2})(\d{3})(\d{3})/g,"04$1 $2 $3");
    mobile_ele.val(formattedNum);
});
$("#landline").blur(function(){
    var landline_ele = $("#landline");
    var landlineNum = mobile_ele.val();
    var formattedNum = landlineNum.replace(/(\d{2})(\d{4})(\d{4})/g,"($1) $2 $3");
    mobile_ele.val(formattedNum);
});

Demo:https://jsfiddle/7c0d418t/

I came up with 1 solution, not convinced how optimal it is, but someone may want to elaborate on it.

    function validatePhoneNumber(phone_number){
        var formatted = "";
        //remove all non-digits
        phone_number = phone_number.replace(/\D/g,'');
        //if number starts with 61, replace 61 with 0
        if (phone_number.match(/^61/)){
              phone_number = "0"+phone_number.slice(2);
        }

        if (phone_number.match(/^04/)){
            if (phone_number.length === 10){
                var formatted = phone_number.replace(/(\d{4})(\d{3})(\d{3})/g,"$1 $2 $3");
            } else {
                alert('Invalid phone number');
            }
        } else if (phone_number.match(/^02|03|07|08/)){
            if (phone_number.length === 10) {
                var formatted = phone_number.replace(/(\d{2})(\d{4})(\d{4})/g,"($1) $2 $3");
            } else {
                alert('Invalid phone number');
            }
        } else if (phone_number.length === 8){
            alert('Please use Area Code for landline numbers');
        } else {

            alert('Invalid phone number');
        }
        //update
        $("#phone").val(formatted);
    }

DEMO: https://jsfiddle/kb4u536a/

You can find here phone validation code for more than 200 countries: https://github./googlei18n/libphonenumber