diff --git a/Client-Side Components/Client Scripts/Mandatory Field Highlighter/README.md b/Client-Side Components/Client Scripts/Mandatory Field Highlighter/README.md new file mode 100644 index 0000000000..a556d44520 --- /dev/null +++ b/Client-Side Components/Client Scripts/Mandatory Field Highlighter/README.md @@ -0,0 +1,20 @@ +# Mandatory Field Highlighter + +## Use Case / Requirement +Visually highlight mandatory fields that are empty by adding a red border, making it easier for users to identify which required fields need to be completed. + +## Solution +An onLoad client script that: +- Identifies all mandatory fields on the form +- Adds red border styling to empty mandatory fields +- Updates styling when fields are filled +- Provides visual feedback to improve user experience + +## Implementation +Add this as an **onLoad** client script on any form where you want to highlight mandatory fields. + +## Notes +- Only highlights empty mandatory fields +- Removes highlighting when fields are filled +- Uses CSS border styling for visual emphasis +- Works with standard ServiceNow forms \ No newline at end of file diff --git a/Client-Side Components/Client Scripts/Mandatory Field Highlighter/script.js b/Client-Side Components/Client Scripts/Mandatory Field Highlighter/script.js new file mode 100644 index 0000000000..585e5504e0 --- /dev/null +++ b/Client-Side Components/Client Scripts/Mandatory Field Highlighter/script.js @@ -0,0 +1,50 @@ +function onLoad() { + // Highlight mandatory fields that are empty + highlightMandatoryFields(); + + // Set up listeners to update highlighting when fields change + setupFieldListeners(); + + function highlightMandatoryFields() { + var allFields = g_form.getFieldNames(); + + for (var i = 0; i < allFields.length; i++) { + var fieldName = allFields[i]; + + // Check if field is mandatory and visible + if (g_form.isMandatory(fieldName) && g_form.isVisible(fieldName)) { + var fieldValue = g_form.getValue(fieldName); + var fieldElement = g_form.getElement(fieldName); + + if (fieldElement) { + if (!fieldValue || fieldValue === '') { + // Add red border for empty mandatory fields + fieldElement.style.border = '2px solid #ff4444'; + fieldElement.style.boxShadow = '0 0 5px rgba(255, 68, 68, 0.3)'; + } else { + // Remove highlighting for filled mandatory fields + fieldElement.style.border = ''; + fieldElement.style.boxShadow = ''; + } + } + } + } + } + + function setupFieldListeners() { + var allFields = g_form.getFieldNames(); + + for (var i = 0; i < allFields.length; i++) { + var fieldName = allFields[i]; + + if (g_form.isMandatory(fieldName)) { + // Add change listener to update highlighting + (function(field) { + g_form.addElementChangeListener(field, function() { + setTimeout(highlightMandatoryFields, 100); + }); + })(fieldName); + } + } + } +} \ No newline at end of file