Verify phone number format in trial form

HTML5 frontend validation

ee/app/views/shared/groups/_trial_form.html.haml

@@ -23,7 +23,8 @@
   .row
     .form-group.col-sm-12
       = label_tag :phone_number, s_('Trial|Telephone number'), for: :phone_number, class: 'col-form-label'
-      = text_field_tag :phone_number, params[:phone_number], class: 'form-control js-trial-field', required: true
+      = telephone_field_tag :phone_number, params[:phone_number], pattern: '^(\+)*[0-9-\s]+$', class: 'form-control js-trial-field', required: true
+      %p.gray-500= _('Allowed characters: +, 0-9, -, and spaces.')
   .row
     .form-group.col-sm-12.gl-select2-html5-required-fix
       = label_tag :country, s_('Trial|Country'), class: 'col-form-label'

ee/app/views/trials/new.html.haml

@@ -33,7 +33,8 @@
     = select_tag :company_size, company_size_options_for_select(params[:company_size]), include_blank: true, class: 'select2', required: true
   .form-group
     = label_tag :phone_number, _('Telephone number'), for: :phone_number, class: 'col-form-label'
-    = telephone_field_tag :phone_number, params[:phone_number], class: 'form-control gl-form-input', required: true
+    = telephone_field_tag :phone_number, params[:phone_number], pattern:  '^(\+)*[0-9-\s]+$', class: 'form-control gl-form-input', required: true
+    %p.gray-500= _('Allowed characters: +, 0-9, -, and spaces.')
   .form-group
     = label_tag :number_of_users, _('How many users will be evaluating the trial?'), for: :number_of_users, class: 'col-form-label'
     = number_field_tag :number_of_users, params[:number_of_users], class: 'form-control gl-form-input', required: true, min: 1

ee/changelogs/unreleased/326452-engineering-trial-form-verify-phone-number-field-content.yml

+---
+title: Verify phone number format in trial form
+merge_request: 61350
+author:
+type: changed

ee/spec/features/trials/capture_lead_spec.rb

@@ -28,7 +28,7 @@ RSpec.describe 'Trial Capture Lead', :js do
       it 'proceeds to the next step' do
         fill_in 'company_name', with: 'GitLab'
         select2 '1-99', from: '#company_size'
-        fill_in 'phone_number', with: '+1234567890'
+        fill_in 'phone_number', with: '+1 23 456-78-90'
         fill_in 'number_of_users', with: '1'
         select2 'US', from: '#country_select'
 
@@ -60,6 +60,29 @@ RSpec.describe 'Trial Capture Lead', :js do
         end
       end
 
+      context 'with invalid phone number format' do
+        it 'shows validation error' do
+          fill_in 'number_of_users', with: '1'
+          invalid_phone_numbers = [
+            '+1 (121) 22-12-23',
+            '+12190AX ',
+            'Tel:129120',
+            '11290+12'
+          ]
+
+          invalid_phone_numbers.each do |phone_number|
+            fill_in 'phone_number', with: phone_number
+
+            click_button 'Continue'
+
+            message = page.find('#phone_number').native.attribute('validationMessage')
+
+            expect(message).to eq('Please match the requested format.')
+            expect(current_path).to eq(new_trial_path)
+          end
+        end
+      end
+
       context 'and enters negative number to the number of users field' do
         it 'shows validation error' do
           fill_in 'number_of_users', with: '-1'

locale/gitlab.pot

@@ -3286,6 +3286,9 @@ msgstr ""
 msgid "Allowed Geo IP"
 msgstr ""
 
+msgid "Allowed characters: +, 0-9, -, and spaces."
+msgstr ""
+
 msgid "Allowed email domain restriction only permitted for top-level groups"
 msgstr ""