From 3bd4651af08dcad8c96c24fc5c7ddf7c6fa62537 Mon Sep 17 00:00:00 2001 From: simonLeary42 <71396965+simonLeary42@users.noreply.github.com> Date: Thu, 24 Jul 2025 10:17:11 -0400 Subject: [PATCH 1/6] document usage of `reportValidity()` --- .../add-matlab/edit-form-js.rst | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst index a380c911f..5d2f20405 100644 --- a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst +++ b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst @@ -9,6 +9,15 @@ 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();); + .. 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``. From 9152649297f9b5b33743b563faefb6af3b7d0773 Mon Sep 17 00:00:00 2001 From: simonLeary42 <71396965+simonLeary42@users.noreply.github.com> Date: Thu, 24 Jul 2025 10:20:44 -0400 Subject: [PATCH 2/6] typo --- .../tutorials-interactive-apps/add-matlab/edit-form-js.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst index 5d2f20405..74fde904f 100644 --- a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst +++ b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst @@ -16,7 +16,7 @@ Other site have used this file to: .. code-block:: js form = document.getElementById("new_batch_connect_session_context"); - form.addEventListener("change", () => form.reportValidity();); + form.addEventListener("change", () => form.reportValidity()); .. warning:: From e96e007c521a90d06b559c2a88828cd06744f17e Mon Sep 17 00:00:00 2001 From: simonLeary42 <71396965+simonLeary42@users.noreply.github.com> Date: Thu, 24 Jul 2025 10:25:28 -0400 Subject: [PATCH 3/6] document usage of `setCustomValidity()` --- .../add-matlab/edit-form-js.rst | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst index 74fde904f..5f51e8c26 100644 --- a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst +++ b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst @@ -11,6 +11,17 @@ OnDemand supports dynamic interactive forms using a file named ``~/ondemand/dev/ Other site have used this file to: +- Mark fields as invalid for site-specific reasons: + + .. code-block:: js + + auto_queues_field = document.getElementById("new_batch_connect_session_auto_queues"); + gpus_field = document.getElementById("new_batch_connect_session_gpus"); + if ((auto_queues_field.value == "cpu") && (parseInt(gpus_field.value) > 0)) { + gpus_field.setCustomValidity("You cannot use a GPU in the CPU queue!"); + } + + - Enable popups for invalid field values right away instead of waiting until the `submit` button is pressed: .. code-block:: js From 9f62ef9695096c1bc2770103ba69ad4fd2f8b965 Mon Sep 17 00:00:00 2001 From: simonLeary42 <71396965+simonLeary42@users.noreply.github.com> Date: Thu, 24 Jul 2025 10:30:33 -0400 Subject: [PATCH 4/6] more code, rearrange --- .../add-matlab/edit-form-js.rst | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst index 5f51e8c26..76888fdbc 100644 --- a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst +++ b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst @@ -11,23 +11,29 @@ OnDemand supports dynamic interactive forms using a file named ``~/ondemand/dev/ Other site have used this file to: -- Mark fields as invalid for site-specific reasons: +- Enable popups for invalid field values right away instead of waiting until the `submit` button is pressed: .. code-block:: js - auto_queues_field = document.getElementById("new_batch_connect_session_auto_queues"); - gpus_field = document.getElementById("new_batch_connect_session_gpus"); - if ((auto_queues_field.value == "cpu") && (parseInt(gpus_field.value) > 0)) { - gpus_field.setCustomValidity("You cannot use a GPU in the CPU queue!"); - } - + form = document.getElementById("new_batch_connect_session_context"); + form.addEventListener("change", () => form.reportValidity()); -- Enable popups for invalid field values right away instead of waiting until the `submit` button is pressed: +- Mark fields as invalid for site-specific reasons: .. code-block:: js - form = document.getElementById("new_batch_connect_session_context"); - form.addEventListener("change", () => form.reportValidity()); + // example: no GPUs in the CPU partition + auto_queues_field = document.getElementById("new_batch_connect_session_auto_queues"); + gpus_field = document.getElementById("new_batch_connect_session_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:: From 0680bf5968a94be7614452613dbb8f7820d03a50 Mon Sep 17 00:00:00 2001 From: simonLeary42 <71396965+simonLeary42@users.noreply.github.com> Date: Thu, 24 Jul 2025 10:32:49 -0400 Subject: [PATCH 5/6] fix field ID --- .../tutorials-interactive-apps/add-matlab/edit-form-js.rst | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst index 76888fdbc..d3837acc9 100644 --- a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst +++ b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst @@ -23,8 +23,8 @@ Other site have used this file to: .. code-block:: js // example: no GPUs in the CPU partition - auto_queues_field = document.getElementById("new_batch_connect_session_auto_queues"); - gpus_field = document.getElementById("new_batch_connect_session_gpus"); + auto_queues_field = document.getElementById("new_batch_connect_session_context_auto_queues"); + gpus_field = document.getElementById("new_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!"); From e7df368758c225c1498f98b7f3c943af6331c5c7 Mon Sep 17 00:00:00 2001 From: simonLeary42 <71396965+simonLeary42@users.noreply.github.com> Date: Thu, 24 Jul 2025 10:33:37 -0400 Subject: [PATCH 6/6] fix field ID again --- .../tutorials-interactive-apps/add-matlab/edit-form-js.rst | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst index d3837acc9..abb7d764d 100644 --- a/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst +++ b/source/tutorials/tutorials-interactive-apps/add-matlab/edit-form-js.rst @@ -23,8 +23,8 @@ Other site have used this file to: .. code-block:: js // example: no GPUs in the CPU partition - auto_queues_field = document.getElementById("new_batch_connect_session_context_auto_queues"); - gpus_field = document.getElementById("new_batch_connect_session_context_gpus"); + 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!");