Merge pull request #3117 from bitzesty/pb/add-front-end-phone-number-…

…validations

Add front end phone number validations to application form/s

app/assets/javascripts/application.js.coffee

@@ -1,5 +1,6 @@
 #= require govuk-frontend-3.13.0.min
 #= require jquery
+#= require google-libphonenumber/dist/libphonenumber.js
 #= require jquery_ujs
 #= require vendor/file_upload/jquery.ui.widget
 #= require vendor/file_upload/jquery.iframe-transport

app/assets/javascripts/frontend/form-validation.js.coffee

@@ -848,6 +848,23 @@ window.FormValidation =
       @appendMessage(question, "Select a maximum of " + selection_limit)
       @addErrorClass(question)
 
+  validatePhoneNumber: (question) ->
+    questionRef = question.attr("data-question_ref")
+    input = question.find("input[type='tel']").val()
+    phoneUtil = libphonenumber.PhoneNumberUtil.getInstance()
+
+    try parsedInput = phoneUtil.parse(input, 'GB')
+    catch exception
+      # libphonenumber throws an exception if we try and parse something like "1" or "abc"
+      # so we catch the exception and give it something which is parseable but not valid
+      @logThis(question, "validatePhoneNumber", "#{input} not a parseable phone number")
+      parsedInput = phoneUtil.parse('01', 'GB')
+    finally
+      if !phoneUtil.isValidNumber(parsedInput)
+        @logThis(question, "validatePhoneNumber", "#{input} not a valid phone number")
+        @appendMessage(question, "Question #{questionRef} is incomplete. Enter a phone number, like 01635 960 001, 07701 900 982 or +44 808 157 0192.")
+        @addErrorClass(question)
+
   validateWebsiteUrl: (question) ->
     questionRef = question.attr("data-question_ref")
     url = question.find("input[type='website_url']").val()
@@ -984,6 +1001,9 @@ window.FormValidation =
     if question.hasClass("sub-fields-word-max")
       @validateSubfieldWordLimit(question)
 
+    if question.find("input[type='tel']").length
+      @validatePhoneNumber(question)
+
     if question.find("input[type='website_url']").length
       @validateWebsiteUrl(question)
 

app/views/qae_form/_sub_fields_question.html.slim

@@ -3,6 +3,7 @@ div role="group" id="#{question.key}"
     - sub_field_key = sub_field_block[:key]
     - sub_field_title = sub_field_block[:title]
     - sub_field_hint = sub_field_block[:hint]
+    - sub_field_type = sub_field_block[:type]
 
     .govuk-form-group.question-required
       label.govuk-label for=question.input_name(suffix: sub_field_key) value=question.input_value(suffix: sub_field_key)
@@ -46,7 +47,7 @@ div role="group" id="#{question.key}"
       - else
         input.govuk-input.js-trigger-autosave[
           class=klass
-          type="text"
+          type=sub_field_type
           id=question.input_name(suffix: sub_field_key)
           value=question.input_value(suffix: sub_field_key)
           name=question.input_name(suffix: sub_field_key)

forms/award_years/v2025/innovation/innovation_step2.rb

@@ -165,12 +165,10 @@ def innovation_step2
         end
 
         text :org_telephone, "Main telephone number." do
-          classes "text-words-max"
           required
           ref "B 6.1"
           type "tel"
           style "small"
-          text_words_max 50
         end
 
         sub_fields :press_contact_details, "Contact details for press enquiries." do
@@ -189,7 +187,7 @@ def innovation_step2
             { title: "Title" },
             { first_name: "First name" },
             { last_name: "Last name" },
-            { telephone: "Telephone" },
+            { telephone: "Telephone", type: "tel" },
             { email: "Email address" },
           ])
           sub_fields_words_max 50

forms/award_years/v2025/international_trade/international_trade_step2.rb

@@ -160,12 +160,10 @@ def trade_step2
         end
 
         text :org_telephone, "Main telephone number." do
-          classes "text-words-max"
           required
           ref "B 6.1"
           type "tel"
           style "small"
-          text_words_max 50
         end
 
         sub_fields :press_contact_details, "Contact details for press enquiries." do
@@ -184,7 +182,7 @@ def trade_step2
             { title: "Title" },
             { first_name: "First name" },
             { last_name: "Last name" },
-            { telephone: "Telephone" },
+            { telephone: "Telephone", type: "tel" },
             { email: "Email address" },
           ])
           sub_fields_words_max 50

forms/award_years/v2025/social_mobility/social_mobility_step2.rb

@@ -157,12 +157,10 @@ def mobility_step2
         end
 
         text :org_telephone, "Main telephone number." do
-          classes "text-words-max"
           required
           ref "B 6.1"
           type "tel"
           style "small"
-          text_words_max 50
         end
 
         sub_fields :press_contact_details, "Contact details for press enquiries." do
@@ -181,7 +179,7 @@ def mobility_step2
             { title: "Title" },
             { first_name: "First name" },
             { last_name: "Last name" },
-            { telephone: "Telephone" },
+            { telephone: "Telephone", type: "tel" },
             { email: "Email address" },
           ])
           sub_fields_words_max 50

forms/award_years/v2025/sustainable_development/sustainable_development_step2.rb

@@ -162,12 +162,10 @@ def development_step2
         end
 
         text :org_telephone, "Main telephone number." do
-          classes "text-words-max"
           required
           ref "B 6.1"
           type "tel"
           style "small"
-          text_words_max 50
         end
 
         sub_fields :press_contact_details, "Contact details for press enquiries." do
@@ -186,7 +184,7 @@ def development_step2
             { title: "Title" },
             { first_name: "First name" },
             { last_name: "Last name" },
-            { telephone: "Telephone" },
+            { telephone: "Telephone", type: "tel" },
             { email: "Email address" },
           ])
           sub_fields_words_max 50

forms/qae_form_builder/press_contact_details_question.rb

@@ -10,7 +10,7 @@ def required_sub_fields
         { title: "Title" },
         { first_name: "First name" },
         { last_name: "Last name" },
-        { telephone: "Telephone" },
+        { telephone: "Telephone", type: "tel" },
         { email: "Email address" },
       ]
     end

forms/qae_form_builder/sub_fields_question.rb

@@ -44,7 +44,7 @@ def required_sub_fields
 
     def rendering_sub_fields
       sub_fields.map do |f|
-        { key: f.keys.first, title: f.values.first, hint: f.try(:[], :hint) }
+        { key: f.keys.first, title: f.values.first, hint: f.try(:[], :hint), type: f.fetch(:type, "text") }
       end
     end
   end

package.json

@@ -6,6 +6,7 @@
     "css-loader": "^5.2.6",
     "css-minimizer-webpack-plugin": "^3.0.2",
     "govuk-frontend": "^5.7.1",
+    "google-libphonenumber": "^3.2.38",
     "mini-css-extract-plugin": "^2.0.0",
     "node-sass": "^9.0.0",
     "sass": "^1.35.1",

yarn.lock

@@ -2633,6 +2633,11 @@ globule@^1.0.0:
     lodash "^4.17.21"
     minimatch "~3.0.2"
 
+google-libphonenumber@^3.2.38:
+  version "3.2.38"
+  resolved "https://registry.yarnpkg.com/google-libphonenumber/-/google-libphonenumber-3.2.38.tgz#5adb0c8ff807d84d4d46b9536d0116d00d85f137"
+  integrity sha512-t/K0dsVmA0gMMVLJgcMeB9g1Ar4ANVWfkY+AJGSdfyJ2Ay7Bu8ceLYpUlC6FZSilZgaF1qbkM9tZydGBEBHqAg==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"