Working on the validation of popup (ajax) forms

Working with ajax forms and validation with Abide.

diff --git a/models/admin/member/billing.php b/models/admin/member/billing.php
index cc0f046..6b1d3f7 100644 (file)
--- a/models/admin/member/billing.php
+++ b/models/admin/member/billing.php
@@ -783,7 +783,6 @@ class GlmMembersAdmin_member_billing // extends GlmDataBilling
                 $haveAccount = true;
             }
 
-            // echo '<pre>$account: ' . print_r( $account, true ) . '</pre>';
             $view = 'editAccount';
             if ( $this->ajaxSide ) {
                 $view = 'editAccountAjax';

diff --git a/views/admin/billing/accounts.html b/views/admin/billing/accounts.html
index 6033b63..050c1d2 100644 (file)
--- a/views/admin/billing/accounts.html
+++ b/views/admin/billing/accounts.html
@@ -158,15 +158,6 @@
             .done(function(resp){
                 $modal.html(resp).foundation('open').trigger('resizeme.zp.reveal');
                 $(document).foundation();
-                $('#billingInfoForm').on('submit', function(e){
-                        e.preventDefault();
-                        $('#billingInfoForm').foundation('validateForm');
-
-
-
-                        console.log( 'data: ', data );
-                        return false;
-                    });
             });
             return false;
         });
@@ -224,39 +215,6 @@
 
         $(document).foundation();
 
-        $('#billingInfoForm')
-        .on('invalid.zf.abide', function(ev,elem){
-            console.log( 'Field id '+ev.target.id+' is invalid' );
-        })
-        .on('valid.zf.abide', function(ev,elem){
-            console.log( 'field id '+elem.attr('name')+'is valid' );
-        })
-        .on('forminvalid.zf.abide', function(ev,frm){
-            console.log( 'form id '+ev.target.id+'is invalid' );
-        })
-        .on('formvalid.zf.abide', function(ev,frm){
-            console.log( 'form id '+frm.attr('id')+'is valid' );
-        })
-        .on('submit', function(ev){
-            ev.preventDefault();
-            var data = $('#billingInfoForm').serialize();
-            console.log('data: ', data);
-            console.log('Submit for form id '+ev.target.id+' intercepted');
-            $.ajax({
-                url: '{$ajaxUrl}?action=glm_members_admin_ajax&' + data,
-                cache: false,
-                beforeSend: startAjax,
-                complete: completeAjax,
-            }).done(function(rsp){
-                console.log( 'rsp:', rsp );
-                var $sucessModal = $('#billingInfoSuccess');
-                $sucessModal.foundation('open').trigger('resizeme.zp.reveal');
-            }).fail(function(){
-                console.log( 'error' );
-            });
-            return false;
-        });
-
         function startAjax(){
             $('#glmLoading').show();
         }

diff --git a/views/admin/billing/editAccountAjax.html b/views/admin/billing/editAccountAjax.html
index 5985801..6861180 100644 (file)
--- a/views/admin/billing/editAccountAjax.html
+++ b/views/admin/billing/editAccountAjax.html
@@ -7,10 +7,13 @@
 {if $accountInsertError}<span class="glm-notice glm-flash-updated">Account Insert Error</span>{/if}
 {if $accountAdded}<span class="glm-notice glm-flash-updated">Account Added</span>{/if}
 
+
 {$data = $account}
 
 <div class="glm-billing-form">
     <form id="billingInfoForm" action="{$ajaxUrl}?action=glm_members_admin_ajax" method="post" data-abide novalidate>
+
+
         <input type="hidden" name="glm_action" value="ajaxBillingInfo" />
 
         <input type="hidden" name="member" value="{$memberID}" />
@@ -31,6 +34,10 @@
         {/if}
         {if !$settings.account_number_enabled}<input type="hidden" name="account_number" value="{$account.fieldData.account_number}" />{/if}
 
+        <div data-abide-error class="alert callout" style="display: none;">
+            <p><i class="fi-alert"></i> There are some errors in your form.</p>
+        </div>
+
         <fieldset class="fieldset">
             <legend>Account Information</legend>
 
@@ -138,9 +145,10 @@
 
             {* Billing Email *}
             {$fieldData = [
-                'data'  => $data,
-                'field' => 'email',
-                'label' => 'Billing Email'
+                'data'        => $data,
+                'field'       => 'email',
+                'label'       => 'Billing Email',
+                'placeholder' => 'Email'
             ]}
             {include file='admin/ui/f6-text.html'}
 
@@ -265,6 +273,10 @@
 
         </fieldset>
 
+        <div data-abide-error class="alert callout" style="display: none;">
+            <p><i class="fi-alert"></i> There are some errors in your form.</p>
+        </div>
+
         <input class="button button-primary" type="submit" value="{if $haveAccount}Save{else}Create{/if} Account">
 
     </form>
@@ -344,6 +356,49 @@ jQuery(document).ready(function($){
     // Flash certain elements for a short time after display
     $(".glm-flash-updated").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);
 
+    //$('#billingInfoForm')
+    $(document)
+    .on('invalid.zf.abide', function(ev,elem){
+        return false;
+        console.log('elem: ', elem);
+        // $('#billingInfoForm').foundation('addErrorClasses', elem);
+        $('#billingInfoForm').foundation('requiredCheck', elem);
+        console.log( 'Field id '+ev.target.id+' is invalid' );
+    })
+    // .on('forminvalid.zf.abide', function(ev,frm){
+    //     console.log( 'form id '+ev.target.id+' is invalid' );
+    // })
+    .on('submit', function(ev){
+        ev.preventDefault();
+        var validForm = $('#billingInfoForm').foundation('validateForm');
+        console.log('ValidForm: ',validForm);
+        var data = $('#billingInfoForm').serialize();
+        console.log('data: ', data);
+        console.log('Submit for form id '+ev.target.id+' intercepted');
+        $.ajax({
+            url: '{$ajaxUrl}?action=glm_members_admin_ajax&' + data,
+            cache: false,
+            beforeSend: startAjax,
+            complete: completeAjax,
+        }).done(function(rsp){
+            console.log( 'rsp:', rsp );
+            if ( rsp.status == '1' ) {
+                var $sucessModal = $('#billingInfoSuccess');
+                $sucessModal.foundation('open').trigger('resizeme.zp.reveal');
+            } else {
+                return false;
+            }
+        }).fail(function(){
+            console.log( 'error' );
+        });
+        return false;
+    });
+    function startAjax(){
+        $('#glmLoading').show();
+    }
+    function completeAjax(){
+        $('#glmLoading').hide();
+    };
 });
 </script>