Input alters text box format

Question

I am new to JavaScript and I have been doing some work creating a form in HTML and JavaScript. In this work I have been trying to validate the format of an input depending on the text entered into a previous field.

What i have been trying is if the country 'Australia' is entered into the 'Country' text box than the 'Telephone' text box is limited to the format (00)00000000 and if it is any other country than the 'Telephone' text box must be formatted in the international number way including the + and country code following e.g. +61 etc

i have done this much of a function so far:

<script>
document.getElementById('txttelephone').onchange = function()
{
var num1 = document.getElementById('txttelephone').value,
    country = document.getElementById('txtcountry').value,
    regex;

if (country == "Australia" || country == "australia")
{
    regex = /\(\d{2}\)\d{8}/;
}
else
{
    regex = /\+\d{15}/;
}
if (!num1.match(regex))
{
    alert('That is not a correct telephone number');
}
}
</script>

That is just the function i did to limit the string length of the 'Telephone' text box to 12 characters but i still have yet to validate to make sure that the area code is included in between brackets in the the form of (00)00000000 and also to validate that a + is included if the country is anything other than Australia (international numbers including country codes).

Here is the HTML i have to use the function on:

<b>Country:</b> <input type="text" id="txtcountry" name="country">
<br>
<b>Telephone:</b> <input type="text" id="txttelephone" name="telephone">

Any help would be greatly appreciated!

Check it out for [regex](http://stackoverflow.com/questions/123559/a-comprehensive-regex-for-phone-number-validation) — Khanh Tran, Apr 05 '13 at 14:08

Mark Walters · Accepted Answer · 2013-04-05T14:54:12.887

1

What you need is a regular expression to test whether the telephone number matches the format you want.

Here is one for the australian numbers /\(\d{2}\)\d{8}/. A regex starts and ends with / then it will match an opening bracket \( followed by two digits \d{2} a closing bracket \) and 8 nore digits \d{8}.

So you function could become this

//changed to onchange event of `txttelephone`
 document.getElementById('txttelephone').onchange = function(){  
     var num1 = document.getElementById('txttelephone').value,  //added .value here
        country = document.getElementById('txtcountry').value,
        regex;
    if(country == "Australia" || country == "australia"){
       regex = /\(\d{2}\)\d{8}/;
    } else {
       regex = /\+\d{15}/;        
    }

    if(!num1.match(regex)){   //If there was not a match for your number format
       alert("thats not a ruddy telephone number!");
    }
}

As a side note, i strongly urge you not to let users "free" type their country in as any typos means your logic will not work i.e You need the user to enter Australia or australia and nothing else will do, Dropdowns were invented for this scenario :).

edited Apr 05 '13 at 14:54

answered Apr 05 '13 at 14:16

Mark Walters

12,060
6
33
48

+1 for suggesting to use a dropdown for the country name. I thought of that when I was reading the question, but forgot to put it in my answer. – Travesty3 Apr 05 '13 at 14:32
Yes, i also thought about using a drop-down list keeping in consideration the typos. Also my javascript does not seem to be working, i have updated it in my original post so you could find my errors. Thank you for the help by the way! – bigsenator Apr 05 '13 at 14:42
@user2244784 Sorry thats my mistake, because of the way i've amended your function it should now really run on the onchange event of the telephone field. Please see the amended code in my answer and have another go :) – Mark Walters Apr 05 '13 at 14:57
That's alright! I have made the changes to my function and it still doesn't seem to be working, when i enter 'Australia' into the 'Country' field it still allows me to enter an unlimited amount of characters into the 'Telephone' field and doesn't validate for inclusion of the brackets :/ – bigsenator Apr 05 '13 at 15:08
Thats strange - have a look here - http://jsbin.com/imopez/1/edit and test my version of this code – Mark Walters Apr 05 '13 at 15:14
also your regular expression for international numbers will expect a + and 15 numbers. Is this correct for you? I believe you will want something more like `/\+\d{10,15}/` or a variation of this which expects a + and 10 to 15 numbers. Please amend this to suit your needs using the link i provided to some information on Regular Expressions – Mark Walters Apr 05 '13 at 15:16
Yes, i wanted to change the amount of the allowable string entered because it varies between countries. I also followd your version of the code and it works perfectly, thanks a lot for all the help! – bigsenator Apr 05 '13 at 15:27
No worries, please test your regex though because it will expect exactly 15 numbers no less, so it won't allow for varying lengths of international numbers. – Mark Walters Apr 05 '13 at 15:36

Travesty3 · Answer 2 · 2013-04-05T14:33:28.850

Try something like this. It's not tested, so the regexes may not be exactly right, but it should at least help:

document.getElementById('myform').onsubmit = function(event) {
    var country = document.getElementById('txtcountry').value;
    var regex = /^\+\d{1,2}\(\d{2,3}\)\d{7,8}$/;
    if (country.toLowerCase() == 'australia') {
         // make the international code optional
        regex = /^(\+\d{1,2})?\(\d{2,3}\)\d{7,8}$/;
    }

    var phone = document.getElementById('txttelephone').value;
    if (!phone.test(regex)) {
        event.preventDefault();
        alert('Bad phone number!');
        return false;
    }
};

This would check the value when they try to submit the form. If they gave a bad value, it will display an error message and prevent the from from being submitted.

Also, as @MarkWalters suggested, I would use a dropdown instead of a text field for the country name. Not only will typos break your logic, but if the user leaves it with a typo and you need to search for all users with the country 'Australia', you may miss the ones that typed it incorrectly.

Input alters text box format

2 Answers2