Browse Source

#2388 - Forms: if form has error then autoscroll to the first element with the error or to submit button upon form submit

RomanL 4 years ago
parent
commit
373e30e89e
2 changed files with 16 additions and 2 deletions
  1. 5 2
      inc/classes/BxDolForm.php
  2. 11 0
      inc/js/classes/BxDolForm.js

+ 5 - 2
inc/classes/BxDolForm.php

@@ -853,7 +853,7 @@ class BxDolForm extends BxDol implements iBxDolReplaceable
 
             $oChecker->enableFormCsrfChecking(isset($this->aParams['csrf']['disable']) && $this->aParams['csrf']['disable'] === true ? false : true);
 
-            $this->_isValid = $oChecker->check($this->aInputs, $aValues);
+            $this->_isValid = $oChecker->check($this->aInputs, $aValues, $this);
 
             if (!$this->_initCheckerNestedForms ())
                 $this->_isValid = false;
@@ -1307,7 +1307,7 @@ class BxDolFormChecker
     }
 
     // check function
-    function check (&$aInputs, $aValues = array())
+    function check (&$aInputs, $aValues = array(), $oForm = null)
     {
         $oChecker = $this->_oChecker;
         $iErrors = 0;
@@ -1472,6 +1472,9 @@ class BxDolFormChecker
         // add error message near submit button
         if ($iErrors && $sSubmitName)
             $aInputs[$sSubmitName]['error'] = _t('_sys_txt_form_submission_error');
+        
+        if ($oForm && $aInputs[$sSubmitName]['error'])
+            $aInputs[$sSubmitName]['error'] .= "<script>window['" . $oForm->getJsObjectName() . "'].onError()</script>";
 
         return $iErrors ? false : true;
     }

+ 11 - 0
inc/js/classes/BxDolForm.js

@@ -83,4 +83,15 @@ BxDolForm.setCheckBoxValue = function (obj) {
     oHidden.val(val);
 }
 
+BxDolForm.prototype.onError = function () {
+
+    var $aErr = $('form[name="' + this._sObject + '"]').find('.bx-form-warn:visible');
+    
+    if ($aErr.length > 0){
+        $([document.documentElement, document.body]).animate({
+            scrollTop: $aErr.first().closest('.bx-form-element-wrapper').offset().top - 100
+        }, 200);
+    }
+}
+
 /** @} */