{"id":847,"date":"2023-10-13T05:51:22","date_gmt":"2023-10-13T05:51:22","guid":{"rendered":"https:\/\/www.devopsconsulting.in\/blog\/?p=847"},"modified":"2023-10-28T05:52:12","modified_gmt":"2023-10-28T05:52:12","slug":"how-to-use-jquery-to-validate-an-international-phone-number","status":"publish","type":"post","link":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/","title":{"rendered":"How to Use jQuery to Validate an International Phone Number"},"content":{"rendered":"\n<p>Let&#8217;s look at how to validate international phone numbers using jQuery, how to validate international phone numbers with a country code, how to validate international phone numbers in Laravel 10, and how to validate international phone numbers using JavaScript and JQuery.<\/p>\n\n\n\n<p>Here, we validate using the International Telephone Input plugin. A plugin called International Telephone Input was created using only JavaScript to handle international phone numbers. It simplifies the process for both you and your users to validate phone numbers before storing them in your backend.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html lang=\"en\">\r\n&lt;head>\r\n\t&lt;title>How To Validate International Phone Number Using jQuery&lt;\/title>\r\n\t&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/intl-tel-input@18.1.1\/build\/css\/intlTelInput.css\">\r\n&lt;\/head>\r\n&lt;body>\r\n\t&lt;div class=\"col-md-6 offset-md-2\">\r\n\t\t&lt;div class=\"container mt-5\">\r\n\t\t\t&lt;div class=\"card\">\r\n\t\t\t\t&lt;div class=\"card-header\">\r\n\t\t\t\t\t&lt;strong>How To Validate International Phone Number Using jQuery f&lt;\/strong>\r\n\t\t\t\t&lt;\/div>\r\n\t\t\t\t&lt;div class=\"card-body\">\r\n\t\t\t\t\t&lt;h6 class=\"card-title\">Phone Number:&lt;\/h6>\r\n\t\t\t\t\t&lt;input id=\"phone\" type=\"tel\">\r\n\t\t\t\t\t&lt;span id=\"valid-msg\" class=\"hide\">\u2713 Valid&lt;\/span>\r\n\t\t\t\t\t&lt;span id=\"error-msg\" class=\"hide\">&lt;\/span>\r\n\t\t\t\t&lt;\/div>\r\n\t\t\t&lt;\/div>\r\n\t\t&lt;\/div>\r\n\t&lt;\/div>\r\n&lt;\/body>\r\n&lt;\/html>\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/intl-tel-input@18.1.1\/build\/js\/intlTelInput.min.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<p><strong>CSS:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.hide {\r\n  display: none;\r\n}\r\n#valid-msg {\r\n  color: #00c900;\r\n}<\/code><\/pre>\n\n\n\n<p><strong>JQuery:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const input = document.querySelector(\"#phone\");\r\nconst errorMsg = document.querySelector(\"#error-msg\");\r\nconst validMsg = document.querySelector(\"#valid-msg\");\r\n\r\n\/\/ here, the index maps to the error code returned from getValidationError - see readme\r\nconst errorMap = &#91;\"Invalid number\", \"Invalid country code\", \"Too short\", \"Too long\", \"Invalid number\"];\r\n\r\n\/\/ initialise plugin\r\nconst iti = window.intlTelInput(input, {\r\n\tutilsScript: \"https:\/\/cdn.jsdelivr.net\/npm\/intl-tel-input@18.1.1\/build\/js\/utils.js\"\r\n});\r\n\r\nconst reset = () => {\r\n\tinput.classList.remove(\"error\");\r\n\terrorMsg.innerHTML = \"\";\r\n\terrorMsg.classList.add(\"hide\");\r\n\tvalidMsg.classList.add(\"hide\");\r\n};\r\n\r\n\/\/ on blur: validate\r\ninput.addEventListener('blur', () => {\r\n\treset();\r\n\tif (input.value.trim()) {\r\n\t\tif (iti.isValidNumber()) {\r\n\t\t\tvalidMsg.classList.remove(\"hide\");\r\n\t\t} else {\r\n\t\t\tinput.classList.add(\"error\");\r\n\t\t\tconst errorCode = iti.getValidationError();\r\n\t\t\terrorMsg.innerHTML = errorMap&#91;errorCode];\r\n\t\t\terrorMsg.classList.remove(\"hide\");\r\n\t\t}\r\n\t}\r\n});\r\n\r\n\/\/ on keyup \/ change flag: reset\r\ninput.addEventListener('change', reset);\r\ninput.addEventListener('keyup', reset);<\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"274\" src=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/10\/image-15.png\" alt=\"\" class=\"wp-image-848\" srcset=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/10\/image-15.png 683w, https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/10\/image-15-300x120.png 300w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s look at how to validate international phone numbers using jQuery, how to validate international phone numbers with a country code, how to validate international phone numbers&#8230; <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86,101],"tags":[],"class_list":["post-847","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use jQuery to Validate an International Phone Number - DevOps Consulting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use jQuery to Validate an International Phone Number - DevOps Consulting\" \/>\n<meta property=\"og:description\" content=\"Let&#8217;s look at how to validate international phone numbers using jQuery, how to validate international phone numbers with a country code, how to validate international phone numbers...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/\" \/>\n<meta property=\"og:site_name\" content=\"DevOps Consulting\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-13T05:51:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-28T05:52:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/10\/image-15.png\" \/>\n<meta name=\"author\" content=\"Abhishek Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/\"},\"author\":{\"name\":\"Abhishek Singh\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\"},\"headline\":\"How to Use jQuery to Validate an International Phone Number\",\"datePublished\":\"2023-10-13T05:51:22+00:00\",\"dateModified\":\"2023-10-28T05:52:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/\"},\"wordCount\":100,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/image-15.png\",\"articleSection\":[\"JavaScript\",\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/\",\"name\":\"How to Use jQuery to Validate an International Phone Number - DevOps Consulting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/image-15.png\",\"datePublished\":\"2023-10-13T05:51:22+00:00\",\"dateModified\":\"2023-10-28T05:52:12+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-to-use-jquery-to-validate-an-international-phone-number\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/image-15.png\",\"contentUrl\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/image-15.png\",\"width\":683,\"height\":274},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/\",\"name\":\"DevOps Consulting\",\"description\":\"DevOps Consulting | SRE Consulting | DevSecOps Consulting | MLOps Consulting\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\",\"name\":\"Abhishek Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"caption\":\"Abhishek Singh\"},\"description\":\"I\u2019m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I\u2019ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains: \u2022 DevOps School \u2013 Tech blogs and tutorials \u2022 Holiday Landmark \u2013 Travel stories and guides \u2022 Stocks Mantra \u2013 Stock market strategies and tips \u2022 My Medic Plus \u2013 Health and fitness guidance \u2022 TrueReviewNow \u2013 Honest product reviews \u2022 Wizbrand \u2013 SEO and digital tools for businesses I\u2019m also exploring the fascinating world of Quantum Computing.\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/author\\\/abhishek\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use jQuery to Validate an International Phone Number - DevOps Consulting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/","og_locale":"en_US","og_type":"article","og_title":"How to Use jQuery to Validate an International Phone Number - DevOps Consulting","og_description":"Let&#8217;s look at how to validate international phone numbers using jQuery, how to validate international phone numbers with a country code, how to validate international phone numbers...","og_url":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/","og_site_name":"DevOps Consulting","article_published_time":"2023-10-13T05:51:22+00:00","article_modified_time":"2023-10-28T05:52:12+00:00","og_image":[{"url":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/10\/image-15.png","type":"","width":"","height":""}],"author":"Abhishek Singh","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Abhishek Singh","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/#article","isPartOf":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/"},"author":{"name":"Abhishek Singh","@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f"},"headline":"How to Use jQuery to Validate an International Phone Number","datePublished":"2023-10-13T05:51:22+00:00","dateModified":"2023-10-28T05:52:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/"},"wordCount":100,"commentCount":1,"image":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/10\/image-15.png","articleSection":["JavaScript","jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/","url":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/","name":"How to Use jQuery to Validate an International Phone Number - DevOps Consulting","isPartOf":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/#primaryimage"},"image":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/10\/image-15.png","datePublished":"2023-10-13T05:51:22+00:00","dateModified":"2023-10-28T05:52:12+00:00","author":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.devopsconsulting.in\/blog\/how-to-use-jquery-to-validate-an-international-phone-number\/#primaryimage","url":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/10\/image-15.png","contentUrl":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/10\/image-15.png","width":683,"height":274},{"@type":"WebSite","@id":"https:\/\/www.devopsconsulting.in\/blog\/#website","url":"https:\/\/www.devopsconsulting.in\/blog\/","name":"DevOps Consulting","description":"DevOps Consulting | SRE Consulting | DevSecOps Consulting | MLOps Consulting","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.devopsconsulting.in\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f","name":"Abhishek Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","caption":"Abhishek Singh"},"description":"I\u2019m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I\u2019ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains: \u2022 DevOps School \u2013 Tech blogs and tutorials \u2022 Holiday Landmark \u2013 Travel stories and guides \u2022 Stocks Mantra \u2013 Stock market strategies and tips \u2022 My Medic Plus \u2013 Health and fitness guidance \u2022 TrueReviewNow \u2013 Honest product reviews \u2022 Wizbrand \u2013 SEO and digital tools for businesses I\u2019m also exploring the fascinating world of Quantum Computing.","url":"https:\/\/www.devopsconsulting.in\/blog\/author\/abhishek\/"}]}},"_links":{"self":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/comments?post=847"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/847\/revisions"}],"predecessor-version":[{"id":849,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/847\/revisions\/849"}],"wp:attachment":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/media?parent=847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/categories?post=847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/tags?post=847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}