document usage of reportValidity(), setCustomValidity()

source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst

@@ -9,6 +9,32 @@ OnDemand supports dynamic interactive forms using a file named ``~/ondemand/dev/
 - Show or hide a license field based on whether the user is permitted to use the OSC academic license or if they are required to use a different license provider (`OSC ANSYS JavaScript`_)
 - Implement a file picker using the File Explorer's API, `Webpack`_, and `VueJS`_ (`bc_js_filepicker`_)
 
+Other site have used this file to:
+
+- Enable popups for invalid field values right away instead of waiting until the `submit` button is pressed:
+
+  .. code-block:: js
+
+    form = document.getElementById("new_batch_connect_session_context");
+    form.addEventListener("change", () => form.reportValidity());
+
+- Mark fields as invalid for site-specific reasons:
+
+  .. code-block:: js
+
+    // example: no GPUs in the CPU partition
+    auto_queues_field = document.getElementById("batch_connect_session_context_auto_queues");
+    gpus_field = document.getElementById("batch_connect_session_context_gpus");
+    function validate_gpu_against_partition() {
+      if ((auto_queues_field.value == "cpu") && (parseInt(gpus_field.value) > 0)) {
+        gpus_field.setCustomValidity("You cannot use a GPU in the CPU queue!");
+      } else {
+        gpus_field.setCustomValidity(""); // valid
+      }
+    }
+    gpus_field.addEventListener("change", validate_gpu_against_partition);
+    auto_queues_field.addEventListener("change", validate_gpu_against_partition);
+
 .. warning::
 
     Be aware that client side validation provided by JavaScript is not perfect and any critical values should be validated / sanitized server side in ``script.sh.erb`` or ``submit.yml.erb``.