You are viewing limited content. For full access, please sign in.

Question

Question

File Upload validation focus

asked on February 10, 2022 Show version history

When a File Upload is required but not completed and the submit button is clicked, the validation error shows as red "Value is required" under the Upload button, but the field is not highlighted and focus is not brought to the field.

So when the upload is far enough above the submit that it is off the screen, the user does not see the validation error text (red "Value is required") and does not understand why the form will not submit.

Is there any way to bring the focus back to the required File Upload field like it does with the other input fields?

0 0

Answer

SELECTED ANSWER
replied on February 11, 2022 Show version history

Hi Bert,

This is a known issue for Forms above 10.4. 

  • If a required file upload or rich text field is empty and above the top of the window when the submit button is selected, the page does not scroll back to that required field. (170432)

 

The root cause is that there is a hidden field for file upload, and parsley cannot auto scroll to it since it is hidden.

As workaround, could you try following custom JavaScript code to see whether it solves your case?

$(document).ready(function(){
        $.listen('parsley:form:error', function() {
            var firstErrorField = $('.parsley-error').first();
            if (firstErrorField.attr('type') === 'file') {
              firstErrorField.parent().find('input').focus();
            }
        });
})

 

3 0
replied on February 12, 2022

Thank you.  Your workaround is much simpler than what I was coming up with.

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.