Hey everyone, Yellow's on the phone!
All of us sooner or later have to deal with checking phone numbers in application forms. Usually the reason is too much crap: users send random numbers to PP for nothing, and because of this we see a large number of leads on Facebook and in tracker, we rejoice, and then it all falls into trash and GG WP.
Let's fight against invalid numbers and start by looking at how we usually solve this problem.
Removing Blank Numbers
The first thing to do, if this is not done for you PP - is to remove the ability to send a form with an empty number. To do this, simply add an attribute to the number entry field required
.
<input type="text" name="phone" required/>
Now when you try to click the send button, the user will be shown a message telling him to fill in the phone field:

It is also a good idea to change the field type to tel
and add autofill. About that You can read it on my Telegram Channel.
Input masks
The standard solution for today. The mask is a template number for the selected GEO and usually includes 2 things: the length of the number and a set of available digits. It looks like this (for RU):
+7-\999-999-99-99
The nines in this case denote any number. Therefore, to make the second digit of the number is a nine before it is a slash. Total number must be 11 digits, of which the first must be a seven, the second a nine, and the rest are any.
Some kind of JavaScript plug-in is plugged into the page (is usually InputMask) and write code like this:
var selector = document.getElementById("phone");
var im = new Inputmask("+7-\999-999-99-99");
im.mask(selector);
Advantages of the method: it works, just plug it in
Disadvantages of the method: You have to figure out what valid phone numbers look like in a particular GEO and write masks for them. If you make a mistake, you lose leads. Sometimes users start writing their number with a country code, even though the code is usually already masked, which leads to incorrect numbers in the application. Sometimes the numbers in the country can be of different lengths, and writing a mask for this becomes a real hassle.
LibPhoneNumber from Google
Google Corp. there is a solution for parsing, formatting, and validating phone numbers. We won't use it directly, but consider another JavaScript library International Telephone Input. It is easier to use and at the same time under the hood uses the same solution from Google.
Let's take a quick look at what we end up with:
- Our script will automatically detect the user's country by its IP address and show the flag of the country in the phone input field
- After entering each digit the script will check the validity of the number and will not send a form with an invalid number
Advantages of the method: works for all countries, no need to make up masks
Disadvantages of the method: does not limit the user when entering, but it does not matter, because you can not send a wild card anyway!
Connecting and using
The first thing to do is to open an example and see how to connect the library to your feeds. To do this, add it to the tag <head>
link to the bibiloteca and css style.

After that, add immediately after the tag <body>
A script that hooks up number validation for your input fields on all forms on the page.

And now look at the red highlighted field: as you understand, in my example is checked for the geo RU, and we would like to make it work universally. Let's consider two options.
We make the script universal by using Keitaro
If you have on hand tracker Keitaroit's easy as pie in a handbasket, instead of
initialCountry: 'RU',
write
initialCountry: '{country_code}',
When the user gets to you on the band, Keitaro will automatically replace the macro {country_code}
to its GEO code.
Making the script universal, using JS code
The idea is this: the user enters the page, the script itself probes his IP on the geo-base and determines the country. To do this you need to set the country in 'auto'
and prescribe a function for defining the country.
initialCountry: "auto",
geoIpLookup: function(callback) {
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
var countryCode = (resp && resp.country) ? resp.country : "us";
callback(countryCode);
});
},
In this case, it uses JQuery to send the request and the IpInfo.io database. If you want - use any other database.
Result
If the user tries to send an invalid number, he is turned away, which is exactly what we wanted.

Implementing and pouring in the plus, gentlemen!
Уведомление: 18 Tips to Reduce Rejection and Trash on Your Landing Pages - Yellow Web