Adds validate_input() -- previously named as "picks"

DESCRIPTION

@@ -97,7 +97,6 @@ Encoding: UTF-8
 Language: en-US
 LazyData: true
 Roxygen: list(markdown = TRUE, packages = c("roxy.shinylive"))
-RoxygenNote: 7.3.3
 Collate:
     'TealAppDriver.R'
     'after.R'
@@ -134,3 +133,4 @@ Collate:
     'validate_inputs.R'
     'validations.R'
     'zzz.R'
+Config/roxygen2/version: 8.0.0

R/module_teal.R

@@ -108,6 +108,7 @@ ui_teal <- function(id, modules) {
     include_teal_css_js(),
     shinyjs::useShinyjs(),
     shiny::includeScript(system.file("js/extendShinyJs.js", package = "teal")),
+    shiny::singleton(shiny::includeScript(system.file("js/input-validator.js", package = "teal"))),
     shiny_busy_message_panel,
     tags$div(id = ns("tabpanel_wrapper"), class = "teal-body", navbar),
     tags$hr(style = "margin: 1rem 0 0.5rem 0;")

R/validate_inputs.R

@@ -193,3 +193,45 @@ any_names <- function(x) {
     }
   )
 }
+
+#' Validate input
+#'
+#' @param inputId (`character`) Character of input ID(s) to validate
+#' @param condition (`logical(1)`, `function(x)`) Logical value or function returning logical value.
+#'  Condition should determine expected state, `FALSE` throws.
+#' @param message (`character(1)`) Character string of validation message to display
+#' @param session Shiny session object
+#'
+#' @return `NULL` or `shiny.silent.error` when condition is not met
+#'
+#' @keywords internal
+validate_input <- function(inputId, # nolint
+                           condition = function(x) TRUE,
+                           message = "",
+                           session = shiny::getDefaultReactiveDomain()) {
+  checkmate::assert_character(inputId, min.len = 1)
+  checkmate::assert(
+    checkmate::check_flag(condition),
+    checkmate::check_function(condition, nargs = length(inputId))
+  )
+  checkmate::assert_string(message)
+
+  # Evaluate condition if it's a function
+  condition_result <- if (is.function(condition)) {
+    input_value <- lapply(inputId, function(id) session$input[[id]])
+    checkmate::assert_flag(do.call(condition, input_value))
+  } else {
+    condition
+  }
+
+  # Send custom message to JavaScript handler
+  lapply(inputId, function(id) {
+    session$sendCustomMessage("validateInput", list(
+      inputId = session$ns(id),
+      isValid = condition_result,
+      message = message
+    ))
+  })
+
+  validate(need(condition_result, message))
+}

inst/css/validation.css

@@ -40,8 +40,8 @@
   padding: 0.5em 0 0.5em 0.5em;
 }
 
-.teal_primary_col > .teal_validated:has(.teal-output-warning),
-.teal_primary_col > .teal_validated:has(.shiny-output-error) {
+.teal_primary_col>.teal_validated:has(.teal-output-warning),
+.teal_primary_col>.teal_validated:has(.shiny-output-error) {
   width: 100%;
   background-color: rgba(223, 70, 97, 0.1);
   border: 1px solid red;

inst/js/extendShinyJs.js

@@ -1,15 +1,15 @@
 // This file contains functions that should be executed at the start of each session,
 // not included in the original HTML
 
-shinyjs.autoFocusModal = function(id) {
+shinyjs.autoFocusModal = function (id) {
   document.getElementById('shiny-modal').addEventListener(
     'shown.bs.modal',
     () => document.getElementById(id).focus(),
     { once: true }
   );
 }
 
-shinyjs.enterToSubmit = function(id, submit_id) {
+shinyjs.enterToSubmit = function (id, submit_id) {
   document.getElementById('shiny-modal').addEventListener(
     'shown.bs.modal',
     () => document.getElementById(id).addEventListener('keyup', (e) => {
@@ -22,10 +22,9 @@ shinyjs.enterToSubmit = function(id, submit_id) {
 }
 
 // Custom message handler to get document title and send it to the server
-Shiny.addCustomMessageHandler('teal-get-document-title', function(message) {
+Shiny.addCustomMessageHandler('teal-get-document-title', function (message) {
   const title = document.title;
   const inputId = message.inputId;
   console.log('Teal: Sending document title:', title, 'to input:', inputId);
-  Shiny.setInputValue(inputId, title, {priority: 'event'});
+  Shiny.setInputValue(inputId, title, { priority: 'event' });
 });
-

inst/js/input-validator.js

@@ -0,0 +1,29 @@
+$(document).on('shiny:connected', function () {
+  Shiny.addCustomMessageHandler('validateInput', function (data) {
+    var inputId = data.inputId;
+    var isValid = data.isValid;
+    var message = data.message;
+
+    // Try both CSS selector patterns
+    var selector1 = '.shiny-input-container#' + inputId;
+    var selector2 = '.shiny-input-container:has(#' + inputId + ')';
+
+    var container = $(selector1);
+    if (container.length === 0) {
+      container = $(selector2);
+    }
+
+    if (container.length > 0) {
+      // Remove existing validation message
+      container.find('.shiny-output-error').remove();
+
+      // Add validation message if rule failed
+      if (!isValid && message && message.trim() !== '') {
+        var validationSpan = $('<span>').addClass('shiny-output-error').text(message);
+        container.append(validationSpan);
+      }
+    } else {
+      console.warn('Container not found for input: ' + inputId);
+    }
+  });
+});