Use Script to Put a Red Border Around Incomplete Fields

  • 1
  • 2
  • Question
  • Updated 2 years ago
  • Answered
I'm trying to figure out a way to adjust the border and color of text entries or fields that are null to allow users a visible indicator of which fields remain incomplete. The fields aren't required, but we want to make sure they're visible when left empty.

I use Dan's iol technique to assist with making columns in embedded reports look better, so I assume I may be able to leverage that somehow.  

I've written the following function:

function redBorder(fid){
$(fid).css({
border: "2px solid red"
});
}

But I'm unsure how to tie this together. I thought maybe I could create a field for each section on my form that calls the function for each empty field within the section.  

This might be impossible. Let me know. I appreciate your help. 
Photo of Steve McLain

Steve McLain

  • 248 Points 100 badge 2x thumb
  • Inquisitive

Posted 2 years ago

  • 1
  • 2
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
This is script will set the background on all selected fields which are empty and remove the background when they change:

$("#_fid_6, #_fid_7, #_PHX_7, #_fid_8").on("change", function() {
  if (!$(this).val()) {
    $(this).css("background", "#FADFAE");
  }
}).trigger("change");

Note the phone number field has two <input>s associated with it and that the multi-line text field is not included in the selection. You probably want to choose another color and make other logical changes to meet your requirements. Also, this is the essential code which needs to be placed inside the appropriate page decoding logic.


Photo of Steve McLain

Steve McLain

  • 248 Points 100 badge 2x thumb
Thank you Dan! This worked perfectly. I inserted the following and it did the trick with red boxes around the inputs:

$("#_fid_6, #_fid_7, #_fid_8").on("change", function() {
  if (!$(this).val()) {
    $(this).css({
  border: "2px solid red"
});
  } else { 
$(this).css({
  border: "0px white"
});
}
}).trigger("change");