Highlight fields that are required and empty

  • 1
  • Question
  • Updated 2 days ago
I'd like to indicate that a field is required only if the field is null.  So - the field label would be red until someone starts typing in it, and then it would be formatted to look like the non-required field labels.  Any suggestions about how I might accomplish this?
Photo of Elissa Bradley

Elissa Bradley

  • 1,724 Points 1k badge 2x thumb

Posted 4 days ago

  • 1
Photo of Elissa Bradley

Elissa Bradley

  • 1,724 Points 1k badge 2x thumb
Here's what I've tried - a Custom Renderer snippet on the fields that I want to require.  I've successfully applied the CSS class to the fields, but the snippet isn't doing anything.  



var $ = skuid.$;
var field = arguments[0], 
value = skuid.utils.decodeHTML(arguments[1]);
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
    
    if (field.mode == 'edit' && value === null) { 
    field.element.addClass("requiredCSS"); 
    }


CSS class: 

.requiredCSS .nx-basicfieldeditor-item-label {
   color: red;
}