feat: replace HTML validation attrs with soft validation

We mustn't prevent form submission, but we still want to give some feedback to the user.

Closes #57

Author: MHajoha

amd/build/view_question.min.js

@@ -0,0 +1,107 @@
+/*
+ * This file is part of the QuestionPy Moodle plugin - https://questionpy.org
+ *
+ * Moodle is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Moodle is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import $ from "jquery";
+import "theme_boost/bootstrap/popover";
+import {get_string} from "core/str";
+
+/**
+ *
+ * @param {HTMLInputElement} element
+ * @param {string} message validation message to show
+ * @param {boolean} ariaInvalid
+ */
+function markInvalid(element, message, ariaInvalid = true) {
+    element.classList.add("qpy-invalid");
+    if (ariaInvalid) {
+        element.setAttribute("aria-invalid", "true");
+    } else {
+        element.removeAttribute("aria-invalid");
+    }
+
+    // See https://getbootstrap.com/docs/4.0/components/popovers/.
+    element.dataset.toggle = "popover";
+    element.dataset.trigger = "hover";
+    element.dataset.content = message;
+    $(element).popover();
+}
+
+/**
+ *
+ * @param {HTMLInputElement} element
+ */
+function unmarkInvalid(element) {
+    element.classList.remove("qpy-invalid");
+    element.removeAttribute("aria-invalid");
+
+    delete element.dataset.toggle;
+    delete element.dataset.trigger;
+    delete element.dataset.content;
+    $(element).popover("dispose");
+}
+
+/**
+ * Softly (i.e. without preventing form submission) validates required and/or pattern conditions on the given element.
+ *
+ * @param {HTMLInputElement} element
+ */
+async function checkConditions(element) {
+    if (element.dataset.qpy_required !== undefined) {
+        if (element.value === null || element.value === "") {
+            const message = await get_string("input_missing", "qtype_questionpy");
+            markInvalid(element, message, false);
+            return;
+        }
+    }
+
+    const pattern = element.dataset.qpy_pattern;
+    if (pattern !== undefined && element.value !== null && element.value !== ""
+        && !element.value.match(`^(?:${pattern})$`)) {
+        const message = await get_string("input_invalid", "qtype_questionpy");
+        markInvalid(element, message);
+        return;
+    }
+
+    const minLength = element.dataset.qpy_minlength;
+    if (minLength !== undefined && element.value !== null && element.value !== ""
+        && element.value.length < parseInt(minLength)) {
+        const message = await get_string("input_too_short", "qtype_questionpy", minLength);
+        markInvalid(element, message);
+        return;
+    }
+
+    const maxLength = element.dataset.qpy_maxlength;
+    if (maxLength !== undefined && element.value !== null && element.value !== ""
+        && element.value.length > parseInt(maxLength)) {
+        const message = await get_string("input_too_long", "qtype_questionpy", maxLength);
+        markInvalid(element, message);
+        return;
+    }
+
+    unmarkInvalid(element);
+}
+
+/**
+ * Adds change event handlers for soft validation.
+ */
+export async function init() {
+    for (const element of document
+        .querySelectorAll("[data-qpy_required], [data-qpy_pattern], [data-qpy_minlength], [data-qpy_maxlength]")) {
+        await checkConditions(element);
+        element.addEventListener("change", event => checkConditions(event.target));
+    }
+}

amd/build/view_question.min.js.map

@@ -38,15 +38,44 @@ class question_metadata {
      */
     public array $expecteddata = [];
 
+    /**
+     * @var string[] an array of required field names
+     * @see \question_manually_gradable::is_complete_response()
+     * @see \question_manually_gradable::is_gradable_response()
+     */
+    public array $requiredfields = [];
+
+    /**
+     * @var int[] a mapping of field names to minimum string length
+     * @see \question_manually_gradable::is_gradable_response()
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength
+     */
+    public array $minlengths = [];
+
+    /**
+     * @var int[] a mapping of field names to maximum string length
+     * @see \question_manually_gradable::is_gradable_response()
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength
+     */
+    public array $maxlengths = [];
+
     /**
      * Initializes a new instance.
      *
      * @param array|null $correctresponse if known, an array of `name => correct_value` entries for the expected
      *                                    response fields
      * @param array $expecteddata an array of `name => PARAM_X` entries for the expected response fields
+     * @param string[] $requiredfields an array of required field names
+     * @param int[] $minlengths a mapping of field names to minimum string length
+     * @param int[] $maxlengths a mapping of field names to maximum string length
      */
-    public function __construct(?array $correctresponse = null, array $expecteddata = []) {
+    public function __construct(?array $correctresponse = null, array $expecteddata = [],
+                                array  $requiredfields = [], array $minlengths = [], array $maxlengths = [])
+    {
         $this->correctresponse = $correctresponse;
         $this->expecteddata = $expecteddata;
+        $this->requiredfields = $requiredfields;
+        $this->minlengths = $minlengths;
+        $this->maxlengths = $maxlengths;
     }
 }

amd/src/view_question.js

@@ -182,6 +182,20 @@ public function get_metadata(): question_metadata {
                 $name = $element->getAttribute("name");
                 if ($name) {
                     $this->metadata->expecteddata[$name] = PARAM_RAW;
+
+                    if ($element->hasAttribute("required")) {
+                        $this->metadata->requiredfields[] = $name;
+                    }
+
+                    $minlength = $element->getAttribute("minlength");
+                    if (is_numeric($minlength)) {
+                        $this->metadata->minlengths[$name] = intval($minlength);
+                    }
+
+                    $maxlength = $element->getAttribute("maxlength");
+                    if (is_numeric($maxlength)) {
+                        $this->metadata->maxlengths[$name] = intval($maxlength);
+                    }
                 }
             }
         }
@@ -215,6 +229,7 @@ private function render_part(DOMNode $part, question_attempt $qa, ?question_disp
         try {
             $this->hide_unwanted_feedback($xpath, $options);
             $this->set_input_values_and_readonly($xpath, $qa, $options);
+            $this->soften_validation($xpath);
             $this->shuffle_contents($xpath);
             $this->mangle_ids_and_names($xpath, $qa);
             $this->clean_up($xpath);
@@ -449,4 +464,42 @@ private function resolve_placeholders(DOMXPath $xpath): void {
             }
         }
     }
+
+    /**
+     * Replaces the HTML attributes `pattern`, `required`, `minlength`, `maxlength` so that submission is not prevented.
+     *
+     * The standard attributes are replaced with `data-qpy_X`, which are then evaluated in JS.
+     *
+     * @param DOMXPath $xpath
+     * @return void
+     */
+    private function soften_validation(DOMXPath $xpath): void
+    {
+        /** @var DOMElement $element */
+        foreach ($xpath->query("//xhtml:input[@pattern]") as $element) {
+            $pattern = $element->getAttribute("pattern");
+            $element->removeAttribute("pattern");
+            $element->setAttribute("data-qpy_pattern", $pattern);
+        }
+
+        foreach ($xpath->query("(//xhtml:input | //xhtml:select | //xhtml:textarea)[@required]") as $element) {
+            $element->removeAttribute("required");
+            $element->setAttribute("data-qpy_required", "data-qpy_required");
+            $element->setAttribute("aria-required", "true");
+        }
+
+        foreach ($xpath->query("(//xhtml:input | //xhtml:textarea)[@minlength or @maxlength]") as $element) {
+            $minlength = $element->getAttribute("minlength");
+            if ($minlength !== "") {
+                $element->removeAttribute("minlength");
+                $element->setAttribute("data-qpy_minlength", $minlength);
+            }
+
+            $maxlength = $element->getAttribute("maxlength");
+            if ($maxlength !== "") {
+                $element->removeAttribute("maxlength");
+                $element->setAttribute("data-qpy_maxlength", $maxlength);
+            }
+        }
+    }
 }

classes/question_metadata.php

@@ -56,6 +56,12 @@
 // Question management.
 $string['package_not_found'] = 'The requested package {$a->packagehash} does not exist.';
 
+// Question UI.
+$string['input_missing'] = 'This field is required.';
+$string['input_invalid'] = 'Invalid input.';
+$string['input_too_long'] = 'Please enter at most {$a} characters.';
+$string['input_too_short'] = 'Please enter at least {$a} characters.';
+
 // Connector.
 $string['curl_init_error'] = 'Could not initialize cURL. Error number: {$a}';
 $string['curl_exec_error'] = 'Error while fetching from server. Error number: {$a}';

classes/question_ui_renderer.php

@@ -83,12 +83,13 @@ public function __construct(string $packagehash, string $questionstate) {
     public function start_attempt(question_attempt_step $step, $variant): void {
         $attempt = $this->api->start_attempt($this->packagehash, $this->questionstate, $variant);
 
+        $step->set_qt_var(self::QT_VAR_ATTEMPT_STATE, $attempt->attemptstate);
+
         // We generate a fixed seed to be used during every render of the attempt, to keep shuffles deterministic.
         $mtseed = mt_rand();
         $step->set_qt_var(self::QT_VAR_MT_SEED, $mtseed);
 
         $this->ui = new question_ui_renderer($attempt->ui->content, $attempt->ui->parameters, $mtseed);
-        $step->set_qt_var(self::QT_VAR_ATTEMPT_STATE, $attempt->attemptstate);
     }
 
     /**
@@ -154,7 +155,13 @@ public function get_correct_response(): ?array {
      *                        {@see question_attempt_step::get_qt_data()}.
      * @return bool whether this response is a complete answer to this question.
      */
-    public function is_complete_response(array $response) {
+    public function is_complete_response(array $response): bool
+    {
+        foreach ($this->ui->get_metadata()->requiredfields as $requiredfield) {
+            if (!isset($response[$requiredfield]) || $response[$requiredfield] === "") {
+                return false;
+            }
+        }
         return true;
     }
 
@@ -165,7 +172,7 @@ public function is_complete_response(array $response) {
      *
      * @param array $prevresponse the responses previously recorded for this question,
      *                            as returned by {@see question_attempt_step::get_qt_data()}
-     * @param array $newresponse  the new responses, in the same format.
+     * @param array $newresponse the new responses, in the same format.
      * @return bool whether the two sets of responses are the same - that is
      *                            whether the new set of responses can safely be discarded.
      */

lang/en/qtype_questionpy.php

@@ -30,13 +30,25 @@
  */
 class qtype_questionpy_renderer extends qtype_renderer {
 
+    /**
+     * Return any HTML that needs to be included in the page's <head> when this
+     * question is used.
+     * @param question_attempt $qa the question attempt that will be displayed on the page.
+     * @return string HTML fragment.
+     */
+    public function head_code(question_attempt $qa) {
+        global $PAGE;
+        $PAGE->requires->js_call_amd("qtype_questionpy/view_question", "init");
+        return parent::head_code($qa);
+    }
+
     /**
      * Generate the display of the formulation part of the question. This is the
      * area that contains the quetsion text, and the controls for students to
      * input their answers. Some question types also embed bits of feedback, for
      * example ticks and crosses, in this area.
      *
-     * @param question_attempt $qa              the question attempt to display.
+     * @param question_attempt $qa the question attempt to display.
      * @param question_display_options $options controls what should and should not be displayed.
      * @return string HTML fragment.
      * @throws coding_exception

question.php

@@ -73,3 +73,7 @@
 .qpy-repetition-remove {
     margin: .5em;
 }
+
+.qpy-invalid {
+    border-color: red;
+}