Service Catalog Variable Validation Error Options

[mah1]

Washington DC Patch 4

We have a Service Catalog form with a variable for the needed by date. We determine a default date and display this as the needed by date when the form loads; however, the user has the option to select a different date. If the user selects a weekend, a holiday or a past date, we clear the field and display a message that the date can't be a weekend, holiday or past date.  It has been requested that we also change the font to red so that it is clear to the user what they need to fix.  Is it possible to do this and to revert back to the normal color when the validation passes?

Thank you

[Yashsvi]

Hi @mah1,

please check below link:

https://www.servicenow.com/community/developer-forum/how-to-display-error-message-next-to-a-variable...

Thank you, please make helpful if you accept the solution. 

[mah1]

Thank you... We are currently using showErrorBox to display the message. That wasn't my question. They want the font for variable label to change to red to indicate there is an issue with this variable.

[Satishkumar B · Accepted solution]

hi @mah1 ,

• Client Script Approach:

  • Create a Client Script that runs on the needed by date variable field in your Service Catalog form.
  • Use the onChange function to trigger actions when the user selects a date.

• Validation and Styling:

  • Inside the onChange function:
    • Check if the selected date is a weekend, holiday, or a past date.
    • If invalid, clear the field, display an error message, and change the font color to red.
    • If valid, revert the font color back to normal.

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    
    var selectedDate = new GlideDateTime(newValue);
    var today = new GlideDateTime();
    
    // Check if the selected date is a weekend, holiday, or past date
    if (isWeekend(selectedDate) || isHoliday(selectedDate) || selectedDate.isBefore(today)) {
        // Clear the field value
        g_form.clearValue(control.name);
        
        // Display error message
        g_form.showFieldMsg(control.name, "Date can't be a weekend, holiday, or past date", "error");
        
        // Change font color to red
        g_form.setLabelOf(control.name, '<span style="color:red">' + g_form.getLabelOf(control.name) + '</span>');
    } else {
        // Revert font color to normal
        g_form.setLabelOf(control.name, g_form.getLabelOf(control.name)); // reset to default label (removes span)
    }
}

function isWeekend(date) {
    // Implement logic to check if the date is a weekend (Saturday or Sunday)
    // Return true if it's a weekend, false otherwise
}

function isHoliday(date) {
    // Implement logic to check if the date is a holiday
    // Return true if it's a holiday, false otherwise
}
​

This approach uses a Client Script to dynamically validate the date field and change the font color to red when there's an error (weekend, holiday, or past date). It then reverts the font color to normal when the validation passes. Adjust the isWeekend and isHoliday functions to match your specific criteria for weekends and holidays.

--------------------------------------------------------------------------------------------------------------------
If my response proves useful, please indicate its helpfulness by selecting "Accept as Solution" and " Helpful." This action benefits both the community and me.

[mah1]

Thank you!