Some additional refinements.

app/assets/javascripts/my_modules/results.js

@@ -334,10 +334,6 @@ function startFileUpload(ev, btn) {
     showResultFormErrors($form, errors);
   });
 
-  if(!noErrors) {
-     animateSpinner(null, false);
-  }
-  ev.preventDefault();
   return noErrors;
 }
 

app/assets/javascripts/protocols/steps.js

@@ -178,7 +178,6 @@ function formCallback($form) {
 
 // Init ajax success/error for edit form
 function formEditAjax($form) {
-  var selectedTabIndex;
   $form
   .on("ajax:beforeSend", function () {
     $(".nested_step_checklists ul").each(function () {
@@ -210,7 +209,7 @@ function formEditAjax($form) {
     $(this).remove();
 
     $errInput = $form.find(".form-group.has-error").first().find("input");
-    renderFormError($errInput);
+    renderFormError(e, $errInput);
 
     formCallback($form);
     initEditableHandsOnTable($form);
@@ -256,7 +255,7 @@ function formNewAjax($form) {
     $(this).remove();
 
     $errInput = $form.find(".form-group.has-error").first().find("input");
-    renderFormError($errInput);
+    renderFormError(e, $errInput);
 
     formCallback($form);
     formNewAjax($form);
@@ -590,11 +589,11 @@ function stepValidator(ev, editMode, forS3) {
   removeBlankFileForms($form);
 
   var $fileInputs = $form.find("input[type=file]");
-  var filesValid = filesValidator($fileInputs);
+  var filesValid = filesValidator(ev, $fileInputs);
   var $checklists = $form.find(".nested_step_checklists");
-  var checklistsValid = checklistsValidator($checklists, editMode);
+  var checklistsValid = checklistsValidator(ev, $checklists, editMode);
   var $nameInput = $form.find("#step_name");
-  var nameValid = nameValidator($nameInput);
+  var nameValid = nameValidator(ev, $nameInput);
 
   if(filesValid && checklistsValid && nameValid) {
     if(forS3) {
@@ -606,9 +605,6 @@ function stepValidator(ev, editMode, forS3) {
       // (startFileUpload already calls it)
       animateSpinner();
     }
-  } else {
-    // Don't submit form
-    ev.preventDefault();
   }
 }
 
@@ -691,20 +687,20 @@ function startFileUpload(ev, btn) {
 
       processFile();
     }, function (errors) {
-      var assetError;
+      var assetErrorMsg;
 
       for (var c in errors) {
         if (/^asset\./.test(c)) {
-          assetError = errors[c];
+          assetErrorMsg = errors[c];
           break;
         }
       }
-      if (assetError) {
+      if (assetErrorMsg) {
         var el = $form.find("input[type=file]").get(inputPointer - 1);
         var $el = $(el);
 
         $form.clear_form_errors();
-        renderFormError($el, assetError);
+        renderFormError(e, $el, assetErrorMsg);
       } else {
         tabsPropagateErrorClass($form);
       }
@@ -712,9 +708,5 @@ function startFileUpload(ev, btn) {
   }
 
   var noErrors = processFile();
-  if(!noErrors) {
-     animateSpinner(null, false);
-  }
-  ev.preventDefault();
   return noErrors;
 }

app/assets/javascripts/sitewide/form_errors.js

@@ -43,7 +43,7 @@ $.fn.render_form_errors_no_clear = function(model_name, errors, input_group) {
  // NOTE: Similar to $.fn.render_form_errors, except here we process
  // one error at a time, which is not read from the form but is
  // specified manually.
-function renderFormError(nameInput, errMsg, errAttributes) {
+function renderFormError(ev, nameInput, errMsg, errAttributes) {
   if(!_.isUndefined(errMsg)) {
     var $errMsgSpan = $(nameInput).next(".help-block");
     errAttributes = _.isUndefined(errAttributes) ? "" : " " + errAttributes;
@@ -67,7 +67,11 @@ function renderFormError(nameInput, errMsg, errAttributes) {
     goToFormElement(nameInput);
   }
 
-  event.preventDefault();
+  // Don't submit form
+  ev.preventDefault();
+  ev.stopPropagation();
+  // Remove spinner if present
+  animateSpinner(null, false);
 }
 
 // If any of tabs (if exist) has errors, mark parent tab

app/assets/javascripts/sitewide/form_validators.js.erb

@@ -1,4 +1,7 @@
-function nameValidator($nameInput) {
+// Form validators. They'll find, render and focus error/s and
+// prevent form submission.
+
+function nameValidator(ev, $nameInput) {
   var nameTooShort = $nameInput.val().length === 0;
   var nameTooLong = $nameInput.val().length > 50;
   var errMsg;
@@ -10,12 +13,12 @@ function nameValidator($nameInput) {
 
   var hasErrors = !_.isUndefined(errMsg);
   if (hasErrors) {
-    renderFormError($nameInput, errMsg);
+    renderFormError(ev, $nameInput, errMsg);
   }
   return !hasErrors;
 }
 
-function checklistsValidator(checklists, editMode) {
+function checklistsValidator(ev, checklists, editMode) {
   var noErrors = true;
   // For every visible (i.e. not removed) checklist
   checklists.each(function() {
@@ -39,7 +42,7 @@ function checklistsValidator(checklists, editMode) {
         if (anyChecklistItemFilled || editMode) {
             // In edit mode, checklist's name can't be blank
             var errMsg = I18n.t("devise.names.not_blank");
-            renderFormError($checklistNameInput, errMsg);
+            renderFormError(ev, $checklistNameInput, errMsg);
             noErrors = false;
         } else  {
           // Hide empty checklist (remove would break logic)
@@ -59,16 +62,17 @@ $.fn.files_validator = function(callback) {
   var $form = $(this);
   if ($form.length) {
     $form.submit(function (ev) {
+      $form.clear_form_errors();
       var $fileInputs = $form.find("input[type=file]");
-       filesValidator($fileInputs, callback);
+      filesValidator(ev, $fileInputs, callback);
     });
   }
 };
 
-function filesValidator(fileInputs, callback) {
+function filesValidator(ev, fileInputs, callback) {
   var filesSizeValid = true;
   if (fileInputs.length) {
-    var filesSizeValid = filesSizeValidator(fileInputs);
+    var filesSizeValid = filesSizeValidator(ev, fileInputs);
     // TODO File content check
 
     if (!filesSizeValid && callback) {
@@ -78,7 +82,7 @@ function filesValidator(fileInputs, callback) {
   return filesSizeValid;
 }
 
-function filesSizeValidator(fileInputs) {
+function filesSizeValidator(ev, fileInputs) {
 
   function getFileTooBigError(file) {
     if (!file) {
@@ -98,19 +102,19 @@ function filesSizeValidator(fileInputs) {
     var assetError = getFileTooBigError(file);
     var input = $(fileInput);
     if (assetError) {
-      renderFormError(input, assetError, "data-error='file-size'");
+      renderFormError(ev, input, assetError, "data-error='file-size'");
       fileSizeValid = false;
     }
   });
   if(fileSizeValid) {
     // Check if there is enough free space for the files
-    fileSizeValid = enaughSpaceValidator(fileInputs);
+    fileSizeValid = enaughSpaceValidator(ev, fileInputs);
   }
   return fileSizeValid;
 }
 
 // Overriden in billing module for checking
 // whether enough organization space is free
-function enaughSpaceValidator(fileInputs) {
+function enaughSpaceValidator(ev, fileInputs) {
   return true;
 }

app/assets/javascripts/sitewide/gestures.js

@@ -1,5 +1,6 @@
 // Scroll to and focus on element
 function goToFormElement(input) {
+	$("html, body").stop();
 	$("html, body").animate(
 		{
 		  scrollTop: $(input).closest(".form-group").offset().top

app/assets/javascripts/users/registrations/edit.js

@@ -89,28 +89,24 @@ function startFileUpload(ev, btn) {
   }, function (errors) {
     $form.render_form_errors("user", errors);
 
-    var avatarError;
+    var avatarErrorMsg;
 
     animateSpinner($form, false);
     for (var c in errors) {
       if (/^avatar/.test(c)) {
-        avatarError = errors[c];
+        avatarErrorMsg = errors[c];
         break;
       }
     }
 
-    if (avatarError) {
+    if (avatarErrorMsg) {
       var $el = $form.find("input[type=file]");
 
       $form.clear_form_errors();
-      renderFormError($el, avatarError);
+      renderFormError(ev, $el, avatarErrorMsg);
     }
   }, "avatar");
 
-  if(!noErrors) {
-     animateSpinner(null, false);
-  }
-  ev.preventDefault();
   return noErrors;
 }