Quick Base Discussions

Expand all | Collapse all

Use Script to Put a Red Border Around Incomplete Fields

  • 1.  Use Script to Put a Red Border Around Incomplete Fields

    Posted 05-09-2017 15:55
    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. 


  • 2.  RE: Use Script to Put a Red Border Around Incomplete Fields

    Top
    Contributor
    Posted 05-09-2017 21:12
    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.




  • 3.  RE: Use Script to Put a Red Border Around Incomplete Fields

    Posted 05-09-2017 22:07
    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");