Forum Discussion

SteveMcLain's avatar
SteveMcLain
Qrew Trainee
8 years ago

Use Script to Put a Red Border Around Incomplete Fields

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. 
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    8 years ago
    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.


    • SteveMcLain's avatar
      SteveMcLain
      Qrew Trainee
      8 years ago
      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");