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

diff --git a/models/front/events/frontAdd.php b/models/front/events/frontAdd.php
index af6acf7..40d0832 100644 (file)
--- 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 (file)
--- 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();