Scroll to error or top of page on submit

Forms Public Forms
1

We have had several users that get confused when clicking on the Submit button and nothing happens. When I have them scroll up to the top, they can see the red error banner that tells them they missed a required field. Is it possible to make this error message display at the current position or scroll the users to the error?

2

Dear @kkreitzer,
You can copy the error message and make it appear near the Submit button with the following code:

//use "fd.spRendered(function(){" for SharePoint form instead
fd.rendered(function(){
  $('.submit-button').on('click', function() {
    $('.clone').remove();
    if(fd.isValid){
      fd.save();
    }
    function copyAndMoveErrorMessage() {
      var clone = $('div.alert.alert-danger').clone().addClass('clone').insertBefore('.submit-button');
      clone.find($('button.close')).on('click', function() { clone.remove(); });
    }
    setTimeout(copyAndMoveErrorMessage, 500);
  });
});

You only need to add CSS class submit-button to the button itself, so it triggers the event on click:
image

3

Is there a way to make this work for a form in a wizard format with only a finish button and no submit button?

4

Hello @aprotteau-dac,

Welcome to Plumsail Community!

We published an update today, now when the current wizard step is invalid - the page is scrolling to the top. Please clear the browser cache to see the updates.

2 Likes