diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index 74b3b63169..9ed478ea90 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -640,6 +640,11 @@ z-index: 9999; } +.modal-error { + border: 2px #FCC solid; + background-color: #f5f0f0; +} + .modal-header { border-bottom: 1px solid #ddd; } diff --git a/InvenTree/templates/js/translated/forms.js b/InvenTree/templates/js/translated/forms.js index 7576f27670..904053a423 100644 --- a/InvenTree/templates/js/translated/forms.js +++ b/InvenTree/templates/js/translated/forms.js @@ -369,7 +369,6 @@ function constructFormBody(fields, options) { // Initialize an "empty" field for each specified field for (field in displayed_fields) { if (!(field in fields)) { - console.log("adding blank field for ", field); fields[field] = {}; } } @@ -517,6 +516,9 @@ function constructFormBody(fields, options) { }); initializeGroups(fields, options); + + // Scroll to the top + $(options.modal).find('.modal-form-content-wrapper').scrollTop(0); } @@ -868,6 +870,8 @@ function handleFormErrors(errors, fields, options) { } } + var first_error_field = null; + for (field_name in errors) { // Add the 'has-error' class @@ -877,6 +881,10 @@ function handleFormErrors(errors, fields, options) { var field_errors = errors[field_name]; + if (field_errors && !first_error_field && isFieldVisible(field_name, options)) { + first_error_field = field_name; + } + // Add an entry for each returned error message for (var idx = field_errors.length-1; idx >= 0; idx--) { @@ -890,6 +898,24 @@ function handleFormErrors(errors, fields, options) { field_dom.append(html); } } + + if (first_error_field) { + // Ensure that the field in question is visible + document.querySelector(`#div_id_${field_name}`).scrollIntoView({ + behavior: 'smooth', + }); + } else { + // Scroll to the top of the form + $(options.modal).find('.modal-form-content-wrapper').scrollTop(0); + } + + $(options.modal).find('.modal-content').addClass('modal-error'); +} + + +function isFieldVisible(field, options) { + + return $(options.modal).find(`#div_id_${field}`).is(':visible'); }