Highlight fields that are required and empty

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;
}

Elissa,

Try this page in your org. It is a V1 page. It combines a Formula field along with a snippet to rerender the field editor. You replace the label with some ‘merge syntax’ that shows/hides the red label based on whether the field is empty. You would need 1 Formula field per field that you want to detect if it is empty. Run the snippet for each field change.

Here is the label:

{{#FirstNameEmpty}}First Name{{/FirstNameEmpty}}{{^FirstNameEmpty}}First Name{{/FirstNameEmpty}}

Here is the formula field:

IF(ISBLANK({{FirstName}}),true,false)

Here is the sample page:









IF(ISBLANK({{FirstName}}),true,false)









row.updated


FirstName








{{Name}}


{{Model.label}}
















{{#FirstNameEmpty}}<font color=“red”>First Name</font>{{/FirstNameEmpty}}{{^FirstNameEmpty}}First Name{{/FirstNameEmpty}}



















var params = arguments[0],
$ = skuid.$;
skuid.$C(‘sk-3_l5-139’).render();









Thanks,

Bill