Client side validation for mandatory questions

Author: AdrienClairembault

js/modules/Forms/Condition/Engine.js

@@ -43,8 +43,6 @@ export class GlpiFormConditionEngine
 
     async computeVisiblity(container)
     {
-        container = document.querySelector(container);
-
         try {
             // Send data to server for computation and apply results.
             return await this.#computeVisibilityOnBackend({

js/modules/Forms/RendererController.js

@@ -41,8 +41,8 @@ import { GlpiFormConditionEngine } from './Condition/Engine.js';
 export class GlpiFormRendererController
 {
     /**
-     * Target form (jquery selector)
-     * @type {string}
+     * Target form
+     * @type {HTMLFormElement}
      */
     #target;
 
@@ -66,7 +66,7 @@ export class GlpiFormRendererController
      */
     constructor(target, form_id) {
         // Target must be a valid form
-        this.#target = target;
+        this.#target = document.querySelector(target);
         if ($(this.#target).prop("tagName") != "FORM") {
             throw new Error("Target must be a valid form");
         }
@@ -124,10 +124,39 @@ export class GlpiFormRendererController
         });
     }
 
+    #checkCurrentSectionValidity() {
+        // Find all required inputs that are hidden and not already disabled.
+        // They must be removed from the check as they are inputs from others
+        // sections or input hidden by condition (thus they should not be
+        // evaluated).
+        // The easiest way to not evaluate these inputs is to disable them.
+        const inputs = $(this.#target).find('[required]:hidden:not(:disabled)');
+        for (const input of inputs) {
+            input.disabled = true;
+        }
+
+        // Check validity and display browser feedback if needed.
+        const is_valid = this.#target.checkValidity();
+        if (!is_valid) {
+            this.#target.reportValidity();
+        }
+
+        // Revert disabled inputs
+        for (const input of inputs) {
+            input.disabled = false;
+        }
+
+        return is_valid;
+    }
+
     /**
      * Submit the target form using an AJAX request.
      */
     async #submitForm() {
+        if (!this.#checkCurrentSectionValidity()) {
+            return;
+        }
+
         // Form will be sumitted using an AJAX request instead
         try {
             // Update tinymce values
@@ -178,6 +207,10 @@ export class GlpiFormRendererController
      * Go to the next section of the form.
      */
     #goToNextSection() {
+        if (!this.#checkCurrentSectionValidity()) {
+            return;
+        }
+
         // Hide current section and its questions
         $(this.#target)
             .find(`
@@ -319,7 +352,7 @@ export class GlpiFormRendererController
 
     #applyVisibilityResults(results)
     {
-        const container = document.querySelector(this.#target);
+        const container = this.#target;
 
         // Apply sections visibility
         for (const [id, must_be_visible] of Object.entries(

tests/cypress/e2e/form/form_rendering.cy.js

@@ -88,6 +88,88 @@ describe('Form rendering', () => {
         cy.getDropdownByLabelText('Urgency').should('have.text', "Very low");
         cy.getDropdownByLabelText('Request type').should('have.text', "Request");
     });
+
+    it('Mandatory questions must be filled', () => {
+        // Set up a form with two sections, each with a mandatory question
+        cy.createWithAPI('Glpi\\Form\\Form', {
+            'name': 'Test mandatory questions',
+        }).as('form_id');
+        cy.get('@form_id').then((form_id) => {
+            // Add mandatory question to default section
+            cy.addQuestionToDefaultSectionWithAPI(
+                form_id,
+                'First question',
+                'Glpi\\Form\\QuestionType\\QuestionTypeShortText',
+                0,
+                null,
+                null,
+                null,
+                true // Mandatory
+            );
+
+            // Add second section
+            cy.createWithAPI('Glpi\\Form\\Section', {
+                'name': 'Second section',
+                'rank': 1,
+                'forms_forms_id': form_id,
+            }).as('second_section_id');
+
+            cy.get('@second_section_id').then((second_section_id) => {
+                // Add mandatory question to second section
+                cy.createWithAPI('Glpi\\Form\\Question', {
+                    'name': 'Second question',
+                    'type': 'Glpi\\Form\\QuestionType\\QuestionTypeShortText',
+                    'vertical_rank': 1,
+                    'forms_sections_id': second_section_id,
+                    'is_mandatory' : true,
+                }).as('second_section_id');
+            });
+
+            // Preview form
+            cy.login();
+            cy.visit(`/Form/Render/${form_id}`);
+
+            // Try to submit first section, should fail since we didn't answer
+            // the mandatory question
+            cy.findByRole('button', {name: 'Continue'}).click();
+            // Wait to be sure that the current state will not be used a false
+            // positive to pass the following assertions in case the current
+            // section was not yet updated by the JS logic.
+            // This would not be needed if we could detect and wait for the "Please
+            // fill this input" popup from the browser but it doesn't seem
+            // supported by cypress.
+            // eslint-disable-next-line cypress/no-unnecessary-waiting
+            cy.wait(600);
+            cy.findByRole('heading', {name: 'First section'}).should('be.visible');
+            cy.findByRole('heading', {name: 'Second section'}).should('not.exist');
+
+            // Submit again with a value
+            cy.findByRole('textbox', {name: 'First question'}).type("test");
+            cy.findByRole('button', {name: 'Continue'}).click();
+            cy.findByRole('heading', {name: 'Second section'}).should('be.visible');
+            cy.findByRole('heading', {name: 'First section'}).should('not.exist');
+
+            // Try to submit the final section, should fail since we didn't answer
+            // the mandatory question
+            cy.findByRole('button', {name: 'Submit'}).click();
+            // Wait to be sure that the current state will not be used a false
+            // positive to pass the following assertions in case the current
+            // section was not yet updated by the JS logic.
+            // This would not be needed if we could detect and wait for the "Please
+            // fill this input" popup from the browser but it doesn't seem
+            // supported by cypress.
+            // eslint-disable-next-line cypress/no-unnecessary-waiting
+            cy.wait(600);
+            cy.findByRole('heading', {name: 'Second section'}).should('be.visible');
+            cy.findByText('Form submitted').should('not.be.visible');
+
+            // Submit again with a value
+            cy.findByRole('textbox', {name: 'Second question'}).type("test");
+            cy.findByRole('button', {name: 'Submit'}).click();
+            cy.findByRole('heading', {name: 'Second section'}).should('not.exist');
+            cy.findByText('Form submitted').should('be.visible');
+        });
+    });
 });
 
 function addQuestionAndGetUuuid(name, type = null, subtype = null) {

tests/cypress/support/commands/form.js

@@ -76,14 +76,16 @@ Cypress.Commands.add('addSection', (name) => {
     cy.focused().type(name); // Section name is focused by default
 });
 
+// TODO: refactor on playwright; too many args
 Cypress.Commands.add('addQuestionToDefaultSectionWithAPI', (
     form_id,
     name,
     type,
     vertical_rank,
     horizontal_rank = 0,
     default_value = null,
-    extra_data = null
+    extra_data = null,
+    is_mandatory = false,
 ) => {
     cy.initApi().doApiRequest('GET', `Glpi\\Form\\Form/${form_id}/Glpi\\Form\\Section`).then((response) => {
         const section_id = response.body[0].id;
@@ -95,6 +97,7 @@ Cypress.Commands.add('addQuestionToDefaultSectionWithAPI', (
             horizontal_rank  : horizontal_rank,
             default_value    : default_value,
             extra_data       : extra_data,
+            is_mandatory     : is_mandatory,
         };
 
         return cy.createWithAPI('Glpi\\Form\\Question', question).then((question_id) => {