Forum Discussion

SteveMcLain's avatar
SteveMcLain
Qrew Trainee
9 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, ...
_anomDiebolt_'s avatar
_anomDiebolt_
Qrew Elite
9 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
9 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");