From df70e05d120be4724b851701b28a6303dd3d2c9e Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Wed, 21 Jun 2017 13:46:39 -0400
Subject: [PATCH] removing the html5 pattern for the phone fields in the front
 end form submission

replacing the html5 pattern for the front end form fields with the masking
jquery plugin that is being used in the admin side
---
 models/front/events/frontAdd.php | 10 ++++++++++
 views/front/events/frontAdd.html |  8 ++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/models/front/events/frontAdd.php b/models/front/events/frontAdd.php
index af6acf7..40d0832 100644
--- a/models/front/events/frontAdd.php
+++ b/models/front/events/frontAdd.php
@@ -183,6 +183,16 @@ class GLmMembersFront_events_frontAdd extends GlmDataEvents
      */
     public function modelAction($actionData = false)
     {
+        wp_register_script(
+            'glm-members-front-maskedinput',
+            GLM_MEMBERS_PLUGIN_URL . 'js/jquery.maskedinput-1.2.2.js',
+            array(
+                    'jquery'
+            ),
+            GLM_MEMBERS_PLUGIN_VERSION
+        );
+        wp_enqueue_script('glm-members-front-maskedinput');
+        
         // Set initial values for variables.
         $fromDate       = '';
         $permalink      = '';
diff --git a/views/front/events/frontAdd.html b/views/front/events/frontAdd.html
index 472a915..c2738a9 100644
--- a/views/front/events/frontAdd.html
+++ b/views/front/events/frontAdd.html
@@ -376,7 +376,7 @@
                 <label style="color: red;">Contact Phone<br>(published on Web site)</label>
             </div>
             <div class="glm-add-event-form-data">
-                <input name="contact_phone" maxlength="100" type="tel" class="glm-required" pattern="{literal}\d{3}[ \-]\d{3}[\-]\d{4}{/literal}" title="(XXX-XXX-XXXX) This field is required"  required>
+                <input name="contact_phone" maxlength="100" type="tel" class="glm-required glm-phone-input" title="(XXX-XXX-XXXX) This field is required"  required>
             </div>
         </div>
         <div class="glm-add-event-form-item">
@@ -400,7 +400,7 @@
                 <label style="color: red;">Organization Phone</label>
             </div>
             <div class="glm-add-event-form-data">
-                <input name="admin_phone" maxlength="100" type="tel" class="glm-required" pattern="{literal}\d{3}[ \-]\d{3}[\-]\d{4}{/literal}" title="(XXX-XXX-XXXX) This field is required"  required>
+                <input name="admin_phone" maxlength="100" type="tel" class="glm-required glm-phone-input" title="(XXX-XXX-XXXX) This field is required"  required>
             </div>
         </div>
         <div class="glm-add-event-form-item">
@@ -437,6 +437,10 @@ jQuery(document).ready(function($) {
         tinyMCE.triggerSave();
         return $('#glm_descr').val();
     }
+    // Set masking for phone number fields - see http://digitalbush.com/projects/masked-input-plugin/
+    $.mask.definitions['e'] = "[A-Za-z0-9: ]";
+    $(".glm-phone-input").mask("999-999-9999? eeeeeeeeeee");
+    
     // Double check the form for valid entries before allowing it to be submitted.
     $('#frontForm').submit(function(){
         var introText = $('textarea[name=intro]').val();
-- 
2.17.1