Implement the field value validation on a page

Level: intermediate

Example

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

1. Set up the page UI

1. Create a custom Validators app based on the Records & business processes template. To do this, follow the guide in the user documentation: Create a custom app.

2. Open the Validators form page page in the working area of the Validators app page.

   The Validators form page page includes the Name field by default.

3. Click in the action panel of the Freedom UI Designer. After you save the page settings, Creatio opens the source code of the Freedom UI page.

2. Set up the field validation

Configure the business logic in the Client Module Designer. For this example, set up the field validation. Add a validator to the Name field of the Validators form page page.

1. Implement a custom usr.MyValidator validator in the validators schema section.

   validators schema section

   validators: /**SCHEMA_VALIDATORS*/{
       /* The validator type must contain a vendor prefix.
       Format the validator type in PascalCase. */
       "usr.MyValidator": {
           "validator": function (config) {
               return function (control) {
                   return control.value !== config.invalidName ? null: {
                       "usr.MyValidator": { message: config.message }
                   };
               };
           },
           "params": [
               {
                   "name": "invalidName"
               },
               {
                   "name": "message"
               }
           ],
           "async": false
       }
   }/**SCHEMA_VALIDATORS*/

2. Bind the MyValidator validator to the UsrName model attribute in the viewModelConfigDiff schema section. Specify the "test" value in the invalidName property. If you enter this value, the app will display an error message specified in the message property.

   viewModelConfigDiff schema section

   viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
       "attributes": {
           "UsrName": {
               ...,
               "validators": {
                   /* Bind the custom validator to the attribute. */
                   "MyValidator": {
                       "type": "usr.MyValidator",
                       "params": {
                           "invalidName": "test",
                           "message": "Invalid name"
                       }
                   }
               }
           },
           ...
       }
   }/**SCHEMA_VIEW_MODEL_CONFIG*/,

3. Click Save on the Client Module Designer's toolbar.

Outcome of the example

To view the outcome of the example:

1. Open the Validators app page and click Run app.
2. Click New on the Validators app toolbar.
3. Enter "test" in the Name field.
4. Click Save on the validator page toolbar.

As a result, the app will not save the test record and display an error notification in a pop-up box.

The app will save a record that has a different name, such as Validator's name, correctly. The record will be displayed in the Validators section list.

Source codes

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*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "UsrName": {
                    "modelConfigDiff": {
                        "path": "PDS.UsrName"
                    },
                    "validators": {
                        /* Bind the custom validator to the attribute. */
                        "MyValidator": {
                            "type": "usr.MyValidator",
                            "params": {
                                "invalidName": "test",
                                "message": "Invalid name"
                            }
                        }
                    }
                },
                "Id": {
                    "modelConfigDiff": {
                        "path": "PDS.Id"
                    }
                }
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfigDiff: /**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*/{
            /* The validator type must contain a vendor prefix.
            Format the validator type in PascalCase. */
            "usr.MyValidator": {
                "validator": function (config) {
                    return function (control) {
                        return control.value !== config.invalidName ? null: {
                            "usr.MyValidator": { message: config.message }
                        };
                    };
                },
                "params": [
                    {
                        "name": "invalidName"
                    },
                    {
                        "name": "message"
                    }
                ],
                "async": false
            }
        }/**SCHEMA_VALIDATORS*/
    };
});

---

Resources

Package with example implementation