Gleaming R: Warning prompt or modal box input: invalid

Question

Gleaming R: Warning prompt or modal box input: invalid

In the process of developing a basic application, I am seeking to implement a pop-up notification for invalid inputs. By referencing the suggestion provided in #1656, I have come up with an example that introduces a visually appealing background color when dealing with invalid inputs (especially considering my 300 variables):

library(shiny)

ui <- fluidPage(
  tags$style(HTML("
    input:invalid {
  background-color: #FFCCCC;
                  }")),

  numericInput("myValue", "My Variable", min = 0, max = 1, value = 0.5),
  numericInput("myValue2", "My Variable2", min = 0, max = 3, step = 0.5, value = 0.5),
  textOutput("text"),
  textOutput("text2")
)

server <- function(input, output) {
  output$text <- renderText(input$myValue)
  output$text2 <- renderText(input$myValue2)
}

shinyApp(ui, server)

Although the

tags$style("input:invalid{ ... }")),

method is effective, I am interested in implementing a bootstrap alert instead of solely modifying the background color.

Essentially, I would like to incorporate the following div class within the input:invalid{} section (considering the extensive list of 300 variables to validate):

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

I would greatly appreciate any input or recommendations on how to achieve this desired functionality.

html css r validation shiny

Answer 1

Answer №1

Note: Below is an updated version of your example featuring alerts for invalid entries based on this solution. These alerts can be triggered when the user either clicks out of the input box (blur) or finishes typing (keyup). Using keyup might be more appropriate for this scenario.

library(shiny)

alert <- '$(document).ready(function() {
            $(function () {
             $("input").keyup(function () {
                 if ($(this).is(":invalid")) {
                     alert(\'Invalid entry!\');
                     }
                 });
             });
         })'

ui <- fluidPage(
    tags$head(tags$script(HTML(alert))),
    tags$style(HTML("
                    input:invalid {
                    background-color: #FFCCCC;
                    }")),
    numericInput("myValue", "My Variable", min = 0, max = 1, value = 0.5),
    numericInput("myValue2", "My Variable2", min = 0, max = 3, step = 0.5, value = 0.5),
    textOutput("text"),
    textOutput("text2")
    )

server <- function(input, output) {
    output$text <- renderText(input$myValue)
    output$text2 <- renderText(input$myValue2)

}

shinyApp(ui, server)

Explore several options below:

shiny: Use modalDialog or showNotification
shinyjs: Check out alert
shinyBS: Utilize bsAlert, and test with bsExamples("Alerts")

The following showcases your sample app incorporating these functions. Observe that both shinyjs and shinyBS necessitate statements in both the ui and server sections, whereas modalDialog only demands additions in the server section. Note that to use shinyJS alongside shinyBS, you must include session within the server function.

library(shiny)
library(shinyjs)
library(shinyBS)

ui <- fluidPage(
    tags$style(HTML("
                    input:invalid {
                    background-color: #FFCCCC;
                    }")),
    #### Initialize shinyjs ####
    useShinyjs(),

    ### Implementing shinyBS ###
    bsAlert("alert"),

    numericInput("myValue", "My Variable", min = 0, max = 1, value = 0.5),
    numericInput("myValue2", "My Variable2", min = 0, max = 3, step = 0.5, value = 0.5),
    textOutput("text"),
    textOutput("text2")
    )

server <- function(session, input, output) {
    output$text <- renderText({
        ### Working with shinyBS ###
        if(!(is.na(input$myValue)) && (input$myValue > 1 | input$myValue < 0)) {
            createAlert(session, "alert", "myValueAlert", title = "shinyBS: Invalid input",
                        content = "'My Variable' should fall between 0 and 1", style = "danger")
        } else {
            closeAlert(session, "myValueAlert")
            return(input$myValue)
        }
        })
    output$text2 <- renderText(input$myValue2)

    ### modalDialog Setup###
     observeEvent(input$myValue, {
         if(!is.na(input$myValue) && (input$myValue > 1 | input$myValue < 0)) {
             showModal(modalDialog(
                 title = "modalDialog: Invalid input",
                 "'My Variable' should fall between 0 and 1"
             ))   
         }
     })

    ### Integrating shinyjs Alert###
    observeEvent(input$myValue, {
        if(!(is.na(input$myValue)) && (input$myValue > 1 | input$myValue < 0)) {
            alert("shinyJS: 'My Variable' should be between 0 and 1")
        }
    })

}

shinyApp(ui, server)

Answer 2

Note: Below is an updated version of your example featuring alerts for invalid entries based on this solution. These alerts can be triggered when the user either clicks out of the input box (blur) or finishes typing (keyup). Using keyup might be more appropriate for this scenario.

library(shiny)

alert <- '$(document).ready(function() {
            $(function () {
             $("input").keyup(function () {
                 if ($(this).is(":invalid")) {
                     alert(\'Invalid entry!\');
                     }
                 });
             });
         })'

ui <- fluidPage(
    tags$head(tags$script(HTML(alert))),
    tags$style(HTML("
                    input:invalid {
                    background-color: #FFCCCC;
                    }")),
    numericInput("myValue", "My Variable", min = 0, max = 1, value = 0.5),
    numericInput("myValue2", "My Variable2", min = 0, max = 3, step = 0.5, value = 0.5),
    textOutput("text"),
    textOutput("text2")
    )

server <- function(input, output) {
    output$text <- renderText(input$myValue)
    output$text2 <- renderText(input$myValue2)

}

shinyApp(ui, server)

Explore several options below:

shiny: Use modalDialog or showNotification
shinyjs: Check out alert
shinyBS: Utilize bsAlert, and test with bsExamples("Alerts")

The following showcases your sample app incorporating these functions. Observe that both shinyjs and shinyBS necessitate statements in both the ui and server sections, whereas modalDialog only demands additions in the server section. Note that to use shinyJS alongside shinyBS, you must include session within the server function.

library(shiny)
library(shinyjs)
library(shinyBS)

ui <- fluidPage(
    tags$style(HTML("
                    input:invalid {
                    background-color: #FFCCCC;
                    }")),
    #### Initialize shinyjs ####
    useShinyjs(),

    ### Implementing shinyBS ###
    bsAlert("alert"),

    numericInput("myValue", "My Variable", min = 0, max = 1, value = 0.5),
    numericInput("myValue2", "My Variable2", min = 0, max = 3, step = 0.5, value = 0.5),
    textOutput("text"),
    textOutput("text2")
    )

server <- function(session, input, output) {
    output$text <- renderText({
        ### Working with shinyBS ###
        if(!(is.na(input$myValue)) && (input$myValue > 1 | input$myValue < 0)) {
            createAlert(session, "alert", "myValueAlert", title = "shinyBS: Invalid input",
                        content = "'My Variable' should fall between 0 and 1", style = "danger")
        } else {
            closeAlert(session, "myValueAlert")
            return(input$myValue)
        }
        })
    output$text2 <- renderText(input$myValue2)

    ### modalDialog Setup###
     observeEvent(input$myValue, {
         if(!is.na(input$myValue) && (input$myValue > 1 | input$myValue < 0)) {
             showModal(modalDialog(
                 title = "modalDialog: Invalid input",
                 "'My Variable' should fall between 0 and 1"
             ))   
         }
     })

    ### Integrating shinyjs Alert###
    observeEvent(input$myValue, {
        if(!(is.na(input$myValue)) && (input$myValue > 1 | input$myValue < 0)) {
            alert("shinyJS: 'My Variable' should be between 0 and 1")
        }
    })

}

shinyApp(ui, server)

Answer 3

Answer №2

If you want to target all inputs that start with "myValue," you can use the following selector:

$('input[id^="myValue"]')

Initially, I attempted the following code:

$(document).ready(function(){
  $('input[id^="myValue"]').on("invalid", function(){alert("invalid");});
})

However, this code didn't work for some reason.

For my second approach, I used the Shiny library to achieve the desired functionality:

library(shiny)
js <- '$(document).ready(function(){
$("input[id^=\\\"myValue\\\"]").on("keyup", function(){
  if($(this)[0].checkValidity()){
    $(this).tooltip("destroy");
  }else{
    $(this).tooltip({title:"invalid"});
  }
})
})
'
ui <- fluidPage(
  tags$head(
    tags$script(js)
  ),
  numericInput("myValue", "My Variable", min = 0, max = 1, value = 0.5),
  numericInput("myValue2", "My Variable2", min = 0, max = 3, step = 0.5, value = 0.5),
  textOutput("text"),
  textOutput("text2")
  )

server <- function(input, output) {
  output$text <- renderText(input$myValue)
  output$text2 <- renderText(input$myValue2)
}

shinyApp(ui, server)

Although this method achieved the desired outcome, I encountered errors in the console when the input was valid. The cause of these errors is currently unknown to me.

Answer 4

If you want to target all inputs that start with "myValue," you can use the following selector:

$('input[id^="myValue"]')

Initially, I attempted the following code:

$(document).ready(function(){
  $('input[id^="myValue"]').on("invalid", function(){alert("invalid");});
})

However, this code didn't work for some reason.

For my second approach, I used the Shiny library to achieve the desired functionality:

library(shiny)
js <- '$(document).ready(function(){
$("input[id^=\\\"myValue\\\"]").on("keyup", function(){
  if($(this)[0].checkValidity()){
    $(this).tooltip("destroy");
  }else{
    $(this).tooltip({title:"invalid"});
  }
})
})
'
ui <- fluidPage(
  tags$head(
    tags$script(js)
  ),
  numericInput("myValue", "My Variable", min = 0, max = 1, value = 0.5),
  numericInput("myValue2", "My Variable2", min = 0, max = 3, step = 0.5, value = 0.5),
  textOutput("text"),
  textOutput("text2")
  )

server <- function(input, output) {
  output$text <- renderText(input$myValue)
  output$text2 <- renderText(input$myValue2)
}

shinyApp(ui, server)

Although this method achieved the desired outcome, I encountered errors in the console when the input was valid. The cause of these errors is currently unknown to me.

Gleaming R: Warning prompt or modal box input: invalid

Answer №1

Answer №2

Similar questions

Steps for splitting a numbered list and adding an image above each item:

Limit selection choices in select element

The resize function fails to trigger when it is required

Having difficulty compiling Bootstrap css with grunt

Safari experiences a decrease in speed when multiple checkbox elements are present

Interacting with jQuery UI Droppable by setting acceptance criteria before submitting a form

Conceal the element if the output of express is void

Ways to eliminate dates from the text of listed items

Universal CSS styling for scrollbar design across platforms

Stretch element to reach the edge of the container

How to show a picture stored in a MySQL database using PHP

Turn off the background when the automatic popup box appears

What could be preventing the onclick event from functioning properly in JavaScript?

Save mathematical equations written in HTML text boxes to a MySQL database

What could be causing my CSS/Layout to alter once AJAX/JavaScript has been executed?

Adding a Sequence of Class Names to <li> Elements with JavaScript

if jade is being inconsistent

Is there a way to eliminate the space between the gray background and the right edge of the browser window?

Attempting to output numerical values using Jquery, however instead of integer values, I am met with [Object object]

Tips for creating animations with JavaScript on a webpage