From 18eeb665722a44f45bf67b4a152a1496369ba794 Mon Sep 17 00:00:00 2001 From: Lubos Hricak Date: Fri, 1 Sep 2023 00:22:04 +0200 Subject: [PATCH 1/2] Remove the error from whole block when validation passes --- app/assets/javascripts/frontend/form-validation.js.coffee | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/javascripts/frontend/form-validation.js.coffee b/app/assets/javascripts/frontend/form-validation.js.coffee index bc17f46aa2..f02e1d51bc 100644 --- a/app/assets/javascripts/frontend/form-validation.js.coffee +++ b/app/assets/javascripts/frontend/form-validation.js.coffee @@ -16,6 +16,7 @@ window.FormValidation = container.closest("td").find(".govuk-error-message").empty() else container.closest(".question-block").find(".govuk-error-message").empty() + container.closest(".question-block").removeClass("govuk-form-group--error") container.closest(".govuk-form-group--error").removeClass("govuk-form-group--error") clearAriaDescribedby: (container) -> From abdaa98204320eaac483166479c393ae014a7815 Mon Sep 17 00:00:00 2001 From: Lubos Hricak Date: Fri, 1 Sep 2023 00:22:34 +0200 Subject: [PATCH 2/2] JS: Validate only form fields --- .../frontend/form-validation.js.coffee | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/app/assets/javascripts/frontend/form-validation.js.coffee b/app/assets/javascripts/frontend/form-validation.js.coffee index f02e1d51bc..6423116e69 100644 --- a/app/assets/javascripts/frontend/form-validation.js.coffee +++ b/app/assets/javascripts/frontend/form-validation.js.coffee @@ -169,23 +169,24 @@ window.FormValidation = addSubfieldError: (question, subquestion) -> questionRef = question.attr("data-question_ref") input = $(subquestion).find('input,textarea,select').filter(':visible') - label = @extractText(input.attr('id')) - incompleteMessage = "Question #{questionRef} is incomplete. It is required and must be filled in." - - if question.hasClass('date-DDMMYYYY') - @addErrorMessage($(subquestion), "#{incompleteMessage} Use the format DD/MM/YYYY.") - else if question.hasClass('date-MMYYYY') - @addErrorMessage($(subquestion), "#{incompleteMessage} Use the format MM/YYYY.") - else if question.hasClass('date-YYYY') - @addErrorMessage($(subquestion), "#{incompleteMessage} Use the format YYYY.") - else if input.hasClass("autocomplete__input") - @addErrorMessage($(subquestion), "Question #{questionRef} is incomplete. #{label} is required and an option must be selected from the following dropdown list.") - else - if question.find(".js-financial-year-latest").length - #avoid duplicate errors for financial year questions - return + if input.length + label = @extractText(input.attr('id')) + incompleteMessage = "Question #{questionRef} is incomplete. It is required and must be filled in." + + if question.hasClass('date-DDMMYYYY') + @addErrorMessage($(subquestion), "#{incompleteMessage} Use the format DD/MM/YYYY.") + else if question.hasClass('date-MMYYYY') + @addErrorMessage($(subquestion), "#{incompleteMessage} Use the format MM/YYYY.") + else if question.hasClass('date-YYYY') + @addErrorMessage($(subquestion), "#{incompleteMessage} Use the format YYYY.") + else if input.hasClass("autocomplete__input") + @addErrorMessage($(subquestion), "Question #{questionRef} is incomplete. #{label} is required and an option must be selected from the following dropdown list.") else - @addErrorMessage($(subquestion), "Question #{questionRef} is incomplete. #{label} is required and must be filled in.") + if question.find(".js-financial-year-latest").length + #avoid duplicate errors for financial year questions + return + else + @addErrorMessage($(subquestion), "Question #{questionRef} is incomplete. #{label} is required and must be filled in.") addQuestionError: (question) -> questionRef = question.attr("data-question_ref")