Implement the validation of a field value on a page

Level: intermediate

To implement the example:

1. Set up the page UI. Read more >>>
2. Set up the field validation. Read more >>>

Example

Add a custom validator that ensures the Name field of the custom record page does not contain the "test" value.

1. Set up the page UI

1. Create an app based on the Records & business processes template. Instructions: Create an app manually (user documentation).

   For this example, create a Validators app.

2. Open the form page in the Freedom UI Designer.

   For this example, open Validators form page that includes the Name field out of the box.

2. Set up the field validation

Configure the business logic in the Client Module Designer. For this example, set up the field validation.

1. Open the source code of the Freedom UI page. To do this, click .

2. Implement a validator type.

   1. Go to the validators schema section.
   2. Implement a usr.ValidateFieldValue custom validator type.
   validators schema section

   validators: /**SCHEMA_VALIDATORS*/{
       /* Implement a custom validator type. */
       "usr.ValidateFieldValue": {
           /* Business logic of the validator. */
           "validator": function (config) {
               return function (control) {
                   return control.value !== config.invalidName ? null: {
                       "usr.ValidateFieldValue": { message: config.message }
                   };
               };
           },
           /* Validator parameters. */
           "params": [
               {
                   "name": "invalidName"
               },
               {
                   "name": "message"
               }
           ],
           "async": false
       }
   }/**SCHEMA_VALIDATORS*/

3. Bind a validator to the attribute.

   1. Go to the viewModelConfig schema section → attributes configuration object → UsrName element.
   2. Bind the ValidateFieldValue custom validator of the usr.ValidateFieldValue type.
   3. Set the invalidName property to the Name field value that triggers the custom validator. I. e., the "test" value.
   4. Set the message property to the tooltip that Creatio displays when Name field contains the "test" value.
   viewModelConfig schema section

   viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/[
       "attributes": {
           ...,
           "UsrName": {
               ...,
               /* The property that contains the list of attribute validators. */
               "validators": {
                   /* Custom validator. */
                   "ValidateFieldValue": {
                       /* Validator type. */
                       "type": "usr.ValidateFieldValue",
                       "params": {
                           /* The field value that triggers the custom validator. */
                           "invalidName": "test",
                           /* The tooltip that Creatio displays when the field contains the value specified in the "invalidName" property. */
                           "message": "Invalid name"
                       }
                   }
               }
           },
           ...,
       },
       ...,
   ]/**SCHEMA_VIEW_MODEL_CONFIG*/,

4. Save the changes.

View the result

1. Open the Validators section.
2. Create a record that has an arbitrary name. For example, "test."

As a result:

• Creatio will display the tooltip about the incorrect value of the Name field and forbid saving the record. View the result >>>

• Creatio will save the record whose value of the Name field does not contain "test," e. g., "Validator's name."

  

Source code

UsrAppValidators_FormPage

/* Declare the AMD module. */
define("UsrAppValidators_FormPage", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "insert",
                "name": "UsrName",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Input",
                    "label": "$Resources.Strings.UsrName",
                    "control": "$UsrName"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items"
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "UsrName": {
                    "modelConfig": {
                        "path": "PDS.UsrName"
                    },
                    /* The property that contains the list of attribute validators. */
                    "validators": {
                        /* Custom validator. */
                        "ValidateFieldValue": {
                            /* Validator type. */
                            "type": "usr.ValidateFieldValue",
                            "params": {
                                /* The field value that triggers the custom validator. */
                                "invalidName": "test",
                                /* The tooltip that Creatio displays when the field contains the value specified in the "invalidName" property. */
                                "message": "Invalid name"
                            }
                        }
                    }
                },
                "Id": {
                    "modelConfig": {
                        "path": "PDS.Id"
                    }
                }
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfig: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppValidators"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{
            /* Implement a custom validator type. */
            "usr.ValidateFieldValue": {
                /* Business logic of the validator. */
                "validator": function (config) {
                    return function (control) {
                        return control.value !== config.invalidName ? null: {
                            "usr.ValidateFieldValue": { message: config.message }
                        };
                    };
                },
                /* Validator parameters. */
                "params": [
                    {
                        "name": "invalidName"
                    },
                    {
                        "name": "message"
                    }
                ],
                "async": false
            }
        }/**SCHEMA_VALIDATORS*/
    };
});

---

Resources

Package with example implementation