Foundation 6 UI - Form Start
WARNING: There may be a problem with using Form Start after Grid Start. Was seeing improper spacing.
-
- Found that using ".position().top -10" was better since it places the top of the window 10px above the
+
+ Found that using ".position().top -10" was better since it places the top of the window 10px above the
box containing the validate message while using ".offset()" caused it to position in the middle of the
validate message.
{$ui = [
- 'action' => string Required URL
- 'method' => string Required Method "post" or "get"
- 'id' => string Form id
- 'file' => boolean If including file upload set to true
- 'validate' => boolean If true, include Abide Form Validation
- 'validateFocusMsg' => boolean If true focuses on validateMessage on error
- 'validateID' => string Unique text that will be added to the validate message container to ensure that it is unique
- 'validateMessage' => string Message to show for a validation error, Defaults to "There are some errors in your form."
+ 'action' => string Required URL
+ 'method' => string Required Method "post" or "get"
+ 'id' => string Form id
+ 'file' => boolean If including file upload set to true
+ 'validate' => boolean If true, include Abide Form Validation
+ 'validateFocusMsg' => boolean If true focuses on validateMessage on error - May be a problem if there's more than one validated form (may have to ID these messages separately)
+ 'validateID' => string Unique text that will be added to the validate message container to ensure that it is unique
+ 'validateMessage' => string Message to show for a validation error, Defaults to "There are some errors in your form."
+ 'leaveModifiedFormCheck' => boolean If set and user tries to leave the page after modifying form input it will warn them and ask if they want to abandon their changes.
]}
*}
<form
<div id="validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}" data-abide-error class="alert callout" style="display: none;">
<p><i class="fi-alert"></i> {$ui.validateMessage|default:'There are some errors in your form.'}</p>
</div>
- {if !empty($ui.validateFocusMsg)}
- <script>
- jQuery(document).ready(function($){
+ <script>
+
+ if (typeof(glmFormDataChangesPending) == 'undefined') {
+ var glmFormDataChangesPending = false;
+ }
+
+ jQuery(document).ready(function($){
+
+ {if !empty($ui.leaveModifiedFormCheck)}
+
+ // When submit button is clicked, disable the beforeunload message
+ $('.glm-form-submit-button').on('click', function() {
+ glmFormDataChangesPending = false;
+ return true;
+ });
+
+ // If submit is required and we're laving the page, alert the user
+ $(window).on('beforeunload', function(){
+
+ // Check if any of the wp_editor instances is dirty (tinyMCE)
+ // ** THIS MAY NOT BE A GOOD LONG TERM SOLUTION **
+ if (typeof tinyMCE != "undefined" && typeof tinyMCE.editors != "undefined") {
+ for(i=0; i<tinyMCE.editors.length; i++){
+ if (!tinymce.editors[i].isNotDirty) {
+ glmFormDataChangesPending = true;
+ }
+ }
+ }
+
+ if (glmFormDataChangesPending) {
+ return true;
+ }
+
+ return;
+ });
+
+ {/if}
+
+ // Setup field validation
+ {if !empty($ui.validateFocusMsg)}
$(document).on( 'forminvalid.zf.abide', function( ev, frm ) {
console.log( 'forminvalid' );
- $("html, body").animate({ scrollTop: $('#validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}').position().top -10 }, 500);
+ $("html, body").animate({ scrollTop: $('#validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}').position().top -10 }, 'slow');
});
- });
- </script>
- {/if}
+ {/if}
+
+ });
+ </script>
{/if}