Manadatory fields using client script

[muskaanchan]

function onChange(control, oldValue, newValue, isLoading) {

  if (isLoading) {

    return;

  }

  hideAll();

  // Approval Matrix

  if (newValue === "approval_matrix_modification") {

    g_form.setDisplay("name_of_approval_matrix", true);

    g_form.setDisplay("add", true);

    g_form.setDisplay("remove", true);

    g_form.setDisplay("details", true);

    // Visibility

  } else if (newValue === "visibility_modification") {

    g_form.setDisplay("name_of_item", true);

    g_form.setDisplay("add_visibility", true);

    g_form.setDisplay("remove_visibility", true);

    g_form.setDisplay("details_visibility_modification", true);

    // Form Modification

  } else if (newValue === "form_modification") {

    g_form.setDisplay("name_of_item_form", true);

    g_form.setDisplay("details_form_modification", true);

  }

  function hideAll() {

    g_form.setDisplay("name_of_approval_matrix", false);

    g_form.setDisplay("add", false);

    g_form.setDisplay("remove", false);

    g_form.setDisplay("details", false);

    g_form.setDisplay("name_of_item", false);

    g_form.setDisplay("add_visibility", false);

    g_form.setDisplay("remove_visibility", false);

    g_form.setDisplay("details_visibility_modification", false);

    g_form.setDisplay("name_of_item_form", false);

    g_form.setDisplay("details_form_modification", false);

  }

}

I want to make name of approval matrix and name of item mandatory. When I am using setMandatory function the form doesn't behave as expected. What should I do?

[Ankur Bawiskar]

@muskaanchan 

update as this

-> first you remove mandatory from all controlled fields

-> then hide them

-> only after that show the needed fields and set mandatory on the visible ones

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading) return;

    hideAll();

    if (newValue == 'approval_matrix_modification') {
        g_form.setDisplay('name_of_approval_matrix', true);
        g_form.setDisplay('add', true);
        g_form.setDisplay('remove', true);
        g_form.setDisplay('details', true);
        g_form.setMandatory('name_of_approval_matrix', true);

    } else if (newValue == 'visibility_modification') {
        g_form.setDisplay('name_of_item', true);
        g_form.setDisplay('add_visibility', true);
        g_form.setDisplay('remove_visibility', true);
        g_form.setDisplay('details_visibility_modification', true);
        g_form.setMandatory('name_of_item', true);

    } else if (newValue == 'form_modification') {
        g_form.setDisplay('name_of_item_form', true);
        g_form.setDisplay('details_form_modification', true);
    }

    function hideAll() {
        g_form.setMandatory('name_of_approval_matrix', false);
        g_form.setMandatory('name_of_item', false);

        g_form.setDisplay('name_of_approval_matrix', false);
        g_form.setDisplay('add', false);
        g_form.setDisplay('remove', false);
        g_form.setDisplay('details', false);

        g_form.setDisplay('name_of_item', false);
        g_form.setDisplay('add_visibility', false);
        g_form.setDisplay('remove_visibility', false);
        g_form.setDisplay('details_visibility_modification', false);

        g_form.setDisplay('name_of_item_form', false);
        g_form.setDisplay('details_form_modification', false);
    }
}

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[Nilesh Pol]

@muskaanchan 

The reason the form is behaving unexpectedly is because fields in ServiceNow cannot be hidden and mandatory at the same time without causing conflicts.

When you make a field mandatory while it is hidden by your hideAll() function, the platform gets confused, often preventing submission or freezing UI validation.

To fix this, you must explicitly clear the mandatory status when hiding fields, and enable the mandatory status only when showing fields.

The Corrected Script:

function onChange(control, oldValue, newValue, isLoading) {
if (isLoading) {
return;
}

// 1. Hide everything AND clear mandatory flags first
hideAndResetAll();

// 2. Set visibility and mandatory status based on selection
if (newValue === "approval_matrix_modification") {
g_form.setDisplay("name_of_approval_matrix", true);
g_form.setMandatory("name_of_approval_matrix", true); // Make Mandatory
g_form.setDisplay("add", true);
g_form.setDisplay("remove", true);
g_form.setDisplay("details", true);

} else if (newValue === "visibility_modification") {
g_form.setDisplay("name_of_item", true);
g_form.setMandatory("name_of_item", true); // Make Mandatory
g_form.setDisplay("add_visibility", true);
g_form.setDisplay("remove_visibility", true);
g_form.setDisplay("details_visibility_modification", true);

} else if (newValue === "form_modification") {
g_form.setDisplay("name_of_item_form", true);
g_form.setDisplay("details_form_modification", true);
}

// Consolidated function to handle visibility and mandatory resets
function hideAndResetAll() {
// Approval Matrix Section
g_form.setMandatory("name_of_approval_matrix", false); // Clear Mandatory First
g_form.setDisplay("name_of_approval_matrix", false);
g_form.setDisplay("add", false);
g_form.setDisplay("remove", false);
g_form.setDisplay("details", false);

// Visibility Section
g_form.setMandatory("name_of_item", false); // Clear Mandatory First
g_form.setDisplay("name_of_item", false);
g_form.setDisplay("add_visibility", false);
g_form.setDisplay("remove_visibility", false);
g_form.setDisplay("details_visibility_modification", false);

// Form Section
g_form.setDisplay("name_of_item_form", false);
g_form.setDisplay("details_form_modification", false);
}
}

[Tanushree Maiti]

Hi @muskaanchan 

UI Policy is always recommended over Client script to :
- Display or hide fields
- Make fields mandatory or read-only
- Control behavior based on simple conditions

UI policy is having following benefits:

• Configure fields as Mandatory, Visible, or Read-only through an easy point-and-click setup.
• Reverse if False- Automatically restores field settings when the condition no longer applies, eliminating the need for manual “else” statements in scripts.
• UI Policies execute after Client Scripts, so in case of conflicts, the UI Policy takes precedence and stays applied.
• Administrators can quickly review and understand the logic without analyzing extensive JavaScript code.
•  Typically introduces less overhead for basic form changes, helping forms load more efficiently.

[vaishali231]

Hey @muskaanchan 

1. First make all fields non-mandatory
2. Hide all fields
3. Then based on selection:

          Display required fields

          Make only visible fields mandatory

Script

function onChange(control, oldValue, newValue, isLoading) {
   if (isLoading) {
       return;
   }
   hideAll();
   clearMandatory();
   // Approval Matrix
   if (newValue === "approval_matrix_modification") {
       g_form.setDisplay("name_of_approval_matrix", true);
       g_form.setDisplay("add", true);
       g_form.setDisplay("remove", true);
       g_form.setDisplay("details", true);
       // Mandatory field
       g_form.setMandatory("name_of_approval_matrix", true);
   }

   // Visibility Modification
   else if (newValue === "visibility_modification") {
       g_form.setDisplay("name_of_item", true);
       g_form.setDisplay("add_visibility", true);
       g_form.setDisplay("remove_visibility", true);
       g_form.setDisplay("details_visibility_modification", true);
       // Mandatory field
       g_form.setMandatory("name_of_item", true);
   }
   // Form Modification
   else if (newValue === "form_modification") {
       g_form.setDisplay("name_of_item_form", true);
       g_form.setDisplay("details_form_modification", true);
   }
   function hideAll() {
       g_form.setDisplay("name_of_approval_matrix", false);
       g_form.setDisplay("add", false);
       g_form.setDisplay("remove", false);
       g_form.setDisplay("details", false);
       g_form.setDisplay("name_of_item", false);
       g_form.setDisplay("add_visibility", false);
       g_form.setDisplay("remove_visibility", false);
       g_form.setDisplay("details_visibility_modification", false);
       g_form.setDisplay("name_of_item_form", false);
       g_form.setDisplay("details_form_modification", false);
   }
   function clearMandatory() {
       g_form.setMandatory("name_of_approval_matrix", false);
       g_form.setMandatory("name_of_item", false);
   }
}

****************************************************************************

If this response helps, please mark it as Accept as Solution and Helpful.

Doing so helps others in the community and encourages me to keep contributing.

Regards

Vaishali Singh

Servicenow Developer
Linkedin - https://www.linkedin.com/in/vaishali-singh-2273361bb