Need to put validation to the tab

Hello team,

I have question that there are 2 tabs and inside it there is available 3 fields. For example, we have MainTab and AdditionalTab and inside MainTab there is firstname, lastname, middlename. Inside AdditionalTab there is Phonenumber, email, birthdate. I need to put validation to this fields separately. If I put validation to firstname and Phonenumber, these two shouldn't affect each other. when Firstname and Phonenumber is not filled in and try to save record, if I am on Maintab, system should return Firstname validation. at the same time, when I change tab to AdditionalTab, system should return Phonenumber validation. in this case how can I put validation based on tabs?

Below I'll share written code for validation.
 
define("UsrExample1Page", ["ConfigurationConstants"], function(ConfigurationConstants) {
    return {
        entitySchemaName: "UsrExample",
        attributes: {
         "CurrentActiveTab": {
               dataValueType: Terrasoft.DataValueType.TEXT,
               type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
               value: "" // Initial value, empty by default
           }
       },
        details: /**SCHEMA_DETAILS*/{
            "Files": {
                "schemaName": "FileDetailV2",
                "entitySchemaName": "UsrExampleFile",
                "filter": {
                    "masterColumn": "Id",
                    "detailColumn": "UsrExample"
                }
            }
        },
        methods: {
           onActiveTabChange: function(activeTab) {
               // Store the active tab identifier
               this.set("CurrentActiveTab", activeTab);
           },
 
           setValidationConfig: function() {
               this.callParent(arguments);
               this.addColumnValidator("UsrName", this.nameFieldsValidator);
               //this.addColumnValidator("UsrLastName", this.nameFieldsValidator);
               this.addColumnValidator("UsrPhoneNumber", this.phoneFieldsValidator);
           },
           nameFieldsValidator: function(value, column) {
               var invalidMessage = "";
               var firstName = this.get("UsrName");
               console.log("Name:", firstName);
               if (Ext.isEmpty(firstName)) {
                   invalidMessage = this.get("Resources.Strings.InvalidNameMessage");
                   // Switch to the tab containing the first name field
                   console.log("Switching to name tab:", invalidMessage);
                   this.set("CurrentActiveTab", "Tabbfc229c0TabLabel"); // Assuming "NameTab" is the tab identifier
               }
               return { invalidMessage: invalidMessage };
           },
           phoneFieldsValidator: function(value, column) {
             var invalidMessage = "";
             var phoneNumber = this.get("UsrPhoneNumber");
             console.log("Phone number:", phoneNumber);
             if (Ext.isEmpty(phoneNumber)) {
                 invalidMessage = this.get("Resources.Strings.InvalidPhoneNumberMessage");
                 console.log("Switching to phone tab:", invalidMessage);
                 this.set("CurrentActiveTab", "Tab68b5b8f6TabLabel"); // Ensure this is correct
             }
             return { invalidMessage: invalidMessage };
         }
       },
        dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
        diff: /**SCHEMA_DIFF*/[
           {
               "operation": "insert",
               "name": "Tabs",
               "values": {
                   "tabs": [
                       {
                           "name": "MainTab",
                           "caption": { "bindTo": "Resources.Strings.MainTabCaption" },
                           "items": [],
                           "change": { "bindTo": "onActiveTabChange" }
                       },
                       {
                           "name": "AdditionalTab",
                           "caption": { "bindTo": "Resources.Strings.AdditionalTabCation" },
                           "items": [],
                           "change": { "bindTo": "onActiveTabChange" }
                       }
                   ]
               }
           }
        ]/**SCHEMA_DIFF*/
    };
});
Like 0

Like

1 comments

Hello Abbos,

To do so, you can replace the OnSaved method, where you make a check:

1) needed tab is active 

2) validation successful

If both are true - call this.callParent(arguments). Else - add needed conditions.

onSaved: function() {
	var activeTab = this.get("ActiveTab");
	var isActiveTabTab2 = activeTab == "Name of the tab"; //result true\false
	var isFirstColumnValid = this.validateFirstColumn(); //result true\false
	if (isActiveTabTab2 && isFirstColumnValid) {
		this.callParent(arguments)
	} elese if () {
		...
	} else if () {
		...
	} else {
		...
	}
},
 
validateFirstColumn: function() {
	var colValue = this.get("ColumnCodeHere");
	return colValue == "Test value" || colValue = "1" //add conditions here
}

P.S. This method will not work with the required fields, since disabling the requirement is impossible.

Show all comments