{"id":662,"date":"2021-12-28T17:10:27","date_gmt":"2021-12-28T13:10:27","guid":{"rendered":"https:\/\/yellowweb.top\/?p=662"},"modified":"2021-12-29T15:22:01","modified_gmt":"2021-12-29T11:22:01","slug":"proveryaem-telefonnye-nomera-so-vsego-mira-ispolzuya-reshenie-ot-google","status":"publish","type":"post","link":"https:\/\/yellowweb.top\/en\/proveryaem-telefonnye-nomera-so-vsego-mira-ispolzuya-reshenie-ot-google\/","title":{"rendered":"Check Phone Numbers Worldwide with Google\u2019s Solution"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Hey everyone, Yellow's on the phone! <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0412\u0441\u0435\u043c \u043d\u0430\u043c \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043d\u044b\u0445 \u043d\u043e\u043c\u0435\u0440\u043e\u0432 \u0432 \u0444\u043e\u0440\u043c\u0430\u0445 \u0437\u0430\u044f\u0432\u043e\u043a. \u041e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0440\u0435\u0448\u0430: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043e\u0442 \u043d\u0435\u0447\u0435\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0448\u043b\u044e\u0442 \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u044b\u0435 \u043d\u043e\u043c\u0435\u0440\u0430 \u0432 \u041f\u041f, \u043c\u044b \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0432\u0438\u0434\u0438\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043b\u0438\u0434\u043e\u0432 \u0432 Facebook \u0438 \u0432 \u0442\u0440\u0435\u043a\u0435\u0440\u0435, \u0440\u0430\u0434\u0443\u0435\u043c\u0441\u044f, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432\u0441\u0451 \u044d\u0442\u043e \u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0442\u0440\u0435\u0448 \u0438 GG WP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let's fight against invalid numbers and start by looking at how we usually solve this problem.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Removing Blank Numbers<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <code>required<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>&lt;input type=&quot;text&quot; name=&quot;phone&quot; <strong>required<\/strong>\/&gt;<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now when you try to click the send button, the user will be shown a message telling him to fill in the phone field:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-7.png\" alt=\"\" class=\"wp-image-663\" width=\"349\" height=\"121\" srcset=\"https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-7.png 349w, https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-7-300x104.png 300w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It is also a good idea to change the field type to <code>tel <\/code>and add autofill. About that <a href=\"https:\/\/t.me\/yellow_web\/539\" target=\"_blank\" rel=\"noreferrer noopener\">You can read it on my Telegram Channel<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Input masks<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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):<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>+7-\\999-999-99-99<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The nines in this case denote <em>any number<\/em>. 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. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some kind of JavaScript plug-in is plugged into the page (<a href=\"https:\/\/github.com\/RobinHerbots\/Inputmask\" target=\"_blank\" rel=\"noreferrer noopener\">is usually InputMask<\/a>) and write code like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>var selector = document.getElementById(\"phone\");\nvar im = new Inputmask(\"+7-\\999-999-99-99\");\nim.mask(selector);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Advantages of the method<\/strong>: it works, just plug it in<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Disadvantages of the method<\/strong>: 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">LibPhoneNumber from Google<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Google Corp. <a href=\"https:\/\/github.com\/google\/libphonenumber\" target=\"_blank\" rel=\"noreferrer noopener\">there is a solution<\/a> for parsing, formatting, and validating phone numbers. We won't use it directly, but consider another JavaScript library <a href=\"https:\/\/github.com\/jackocnr\/intl-tel-input\" target=\"_blank\" rel=\"noreferrer noopener\">International Telephone Input<\/a>. It is easier to use and at the same time under the hood uses the same solution from Google.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let's take a quick look at what we end up with:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>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<\/li><li>After entering each digit the script will check the validity of the number and will not send a form with an invalid number<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Advantages of the method<\/strong>: works for all countries, no need to make up masks<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Disadvantages of the method<\/strong>: does not limit the user when entering, but it does not matter, because you can not send a wild card anyway!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Connecting and using<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/gist.github.com\/dvygolov\/52e4237a4aeb32c907139332aa76d8fd\" target=\"_blank\" rel=\"noreferrer noopener\">The first thing to do is to open an example<\/a> and see how to connect the library to your feeds. To do this, add it to the tag <code>&lt;head&gt;<\/code> link to the bibiloteca and css style.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"98\" src=\"https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-8-1024x98.png\" alt=\"\" class=\"wp-image-664\" srcset=\"https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-8-1024x98.png 1024w, https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-8-300x29.png 300w, https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-8-768x73.png 768w, https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-8.png 1134w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After that, add immediately after the tag <code>&lt;body&gt;<\/code> A script that hooks up number validation for your input fields on all forms on the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"632\" src=\"https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-9.png\" alt=\"\" class=\"wp-image-665\" srcset=\"https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-9.png 888w, https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-9-300x214.png 300w, https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-9-768x547.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u041a\u0435\u0439\u0442\u0430\u0440\u043e<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u0434 \u0440\u0443\u043a\u043e\u0439 \u0442\u0440\u0435\u043a\u0435\u0440 \u041a\u0435\u0439\u0442\u0430\u0440\u043e, \u0442\u043e \u0432\u0441\u0451 \u043f\u0440\u043e\u0449\u0435 \u043f\u0430\u0440\u0435\u043d\u043e\u0439 \u0440\u0435\u043f\u044b, \u0432\u043c\u0435\u0441\u0442\u043e<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>initialCountry: 'RU',<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">write<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>initialCountry: '{country_code}',<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u043a \u0432\u0430\u043c \u043d\u0430 \u043b\u0435\u043d\u0434, \u041a\u0435\u0439\u0442\u0430\u0440\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u043e\u043c \u0437\u0430\u043c\u0435\u043d\u0438\u0442 \u043c\u0430\u043a\u0440\u043e\u0441 <code>{country_code}<\/code> to its GEO code.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"> Making the script universal, using JS code<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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 <code>'auto'<\/code> and prescribe a function for defining the country.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  initialCountry: \"auto\",\n  geoIpLookup: function(callback) {\n    $.get('https:\/\/ipinfo.io', function() {}, \"jsonp\").always(function(resp) {\n      var countryCode = (resp &amp;&amp; resp.country) ? resp.country : \"us\";\n      callback(countryCode);\n    });\n  },<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In this case, it uses JQuery to send the request and the IpInfo.io database. If you want - use any other database.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Result<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If the user tries to send an invalid number, he is turned away, which is exactly what we wanted.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"331\" height=\"112\" src=\"https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-10.png\" alt=\"\" class=\"wp-image-666\" srcset=\"https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-10.png 331w, https:\/\/yellowweb.top\/wp-content\/uploads\/2021\/12\/image-10-300x102.png 300w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Implementing and pouring in the plus, gentlemen!<\/p>","protected":false},"excerpt":{"rendered":"<p>How to validate phone numbers worldwide using Google\u2019s tooling when verification quality matters in operational flows.<\/p>","protected":false},"author":2,"featured_media":667,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[30,20],"tags":[],"class_list":["post-662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-landings","category-scripts"],"_links":{"self":[{"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/posts\/662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/comments?post=662"}],"version-history":[{"count":2,"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/posts\/662\/revisions"}],"predecessor-version":[{"id":669,"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/posts\/662\/revisions\/669"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/media\/667"}],"wp:attachment":[{"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/media?parent=662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/categories?post=662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yellowweb.top\/en\/wp-json\/wp\/v2\/tags?post=662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}