You can do this using field validation. There is an article in the academy that covers exactly the scenario you're after (ensuring one date field is after another date field). 

See https://academy.creatio.com/documents/technic-sdk/7-15/how-add-field-va…

Ryan

Thanks Ryan!

Ryan Farley,

I got it to work, (yay) however, I have THREE independent sets of dates on the same page that I want to use this validation for, which is complicating things. I tried to copy the code and paste it twice and just edit the date columns being used for start and end date, but I'm given the JS error "duplicate function" being used. I'm sure I can accomplish my task using something like else if statements, however I'm not very well versed in JS. Could you provide any advice to get me pointed in the right direction? otherwise I'll be trial-and-erroring for a while until I figure it out. I'll post the code that worked for the one set of dates, and the code that gave me the error when I tried to copy it for the next set of dates.

This worked:

// Validate method for values in the [Planned Work End] and [Planned Work Start] columns.

            dueDateValidator: function() {

                // Variable for storing a validation error message.

                var invalidMessage = "";

                // Checking values in the [Planned Work End] and [Planned Work Start] columns.

                if (this.get("VvtPlannedWorkEnd") < this.get("VvtPlannedWorkStart")) {

                     // If the value of the [Planned Work End] column is less than the value

                     // of the [Planned Work Start] column a value of the localizable string is

                     // placed into the variable along with the validation error message

                     // in the invalidMessage variable.

                    invalidMessage = this.get("Resources.Strings.PlannedWorkEndLessThanStart");

                }

                 // Object whose properties contain validation error messages.

                 // If the validation is successful, empty strings are returned to the

                 // object.

                return {

                    // Validation error message.

                    invalidMessage: invalidMessage

                };

            },

            // Redefining the base method initiating custom validators.

            setValidationConfig: function() {

                // This calls the initialization of validators for the parent view model.

                this.callParent(arguments);

                // The dueDateValidator() validate method is added for the [Planned Work End] column.

                this.addColumnValidator("VvtPlannedWorkEnd", this.dueDateValidator);

                // The dueDateValidator() validate method is added for the [Planned Work Start] column.

                this.addColumnValidator("VvtPlannedWorkStart", this.dueDateValidator);

            },

But the below gave me the JS Errors  dueDateValidator: function() { | Duplicate key 'dueDateValidator'.

setValidationConfig: function() { | Duplicate key 'setValidationConfig'.

// Validate method for values in the [Planned Work End] and [Planned Work Start] columns.

            dueDateValidator: function() {

                // Variable for storing a validation error message.

                var invalidMessage = "";

                // Checking values in the [Planned Work End] and [Planned Work Start] columns.

                if (this.get("VvtPlannedWorkEnd") < this.get("VvtPlannedWorkStart")) {

                     // If the value of the [Planned Work End] column is less than the value

                     // of the [Planned Work Start] column a value of the localizable string is

                     // placed into the variable along with the validation error message

                     // in the invalidMessage variable.

                    invalidMessage = this.get("Resources.Strings.PlannedWorkEndLessThanStart");

                }

                 // Object whose properties contain validation error messages.

                 // If the validation is successful, empty strings are returned to the

                 // object.

                return {

                    // Validation error message.

                    invalidMessage: invalidMessage

                };

            },

            // Redefining the base method initiating custom validators.

            setValidationConfig: function() {

                // This calls the initialization of validators for the parent view model.

                this.callParent(arguments);

                // The dueDateValidator() validate method is added for the [Planned Work End] column.

                this.addColumnValidator("VvtPlannedWorkEnd", this.dueDateValidator);

                // The dueDateValidator() validate method is added for the [Planned Work Start] column.

                this.addColumnValidator("VvtPlannedWorkStart", this.dueDateValidator);

            },

// Validate method for values in the [Actual Work End] and [Actual Work Start] columns.

            dueDateValidator: function() {

                // Variable for storing a validation error message.

                var invalidMessage = "";

                // Checking values in the [Actual Work End] and [Actual Work Start] columns.

                if (this.get("VvtActualWorkEnd") < this.get("VvtActualWorkStart")) {

                     // If the value of the [Actual Work End] column is less than the value

                     // of the [Actual Work Start] column a value of the localizable string is

                     // placed into the variable along with the validation error message

                     // in the invalidMessage variable.

                    invalidMessage = this.get("Resources.Strings.ActualWorkEndLessThanStart");

                }

                 // Object whose properties contain validation error messages.

                 // If the validation is successful, empty strings are returned to the

                 // object.

                return {

                    // Validation error message.

                    invalidMessage: invalidMessage

                };

            },

            // Redefining the base method initiating custom validators.

            setValidationConfig: function() {

                // This calls the initialization of validators for the parent view model.

                this.callParent(arguments);

                // The dueDateValidator() validate method is added for the [Actual Work End] column.

                this.addColumnValidator("VvtActualWorkEnd", this.dueDateValidator);

                // The dueDateValidator() validate method is added for the [Actual Work Start] column.

                this.addColumnValidator("VvtActualWorkStart", this.dueDateValidator);

            },

Ryan Farley,

Just wanted to share that a coworker who is excellent with Java Script helped me figure this out. For anyone else that is faced with the same issue where you have multiple sets of dates to validate on the same page, here is what we did:

// Validate method for values in the [Planned Work End] and [Planned Work Start] columns.

            dueDateValidator: function() {

                // Variable for storing a validation error message.

                var invalidMessage = "";

                // Checking values in the [Planned Work End] and [Planned Work Start] columns.

                if (this.get("VvtPlannedWorkEnd") < this.get("VvtPlannedWorkStart")) {

                     // If the value of the [Planned Work End] column is less than the value

                     // of the [Planned Work Start] column a value of the localizable string is

                     // placed into the variable along with the validation error message

                     // in the invalidMessage variable.

                    invalidMessage = this.get("Resources.Strings.EndLessThanStart");

                }

                 // Object whose properties contain validation error messages.

                 // If the validation is successful, empty strings are returned to the

                 // object.

                return {

                    // Validation error message.

                    invalidMessage: invalidMessage

                };

            },

            // Validate method for outage values

            outageDateValidator: function() {

                // Variable for storing a validation error message.

                var invalidMessage = "";

                // Checking values in the [Planned Outage End] and [Planned Outage Start] columns.

                if (this.get("VvtPlannedOutageEnd") < this.get("VvtPlannedOutageStart")) {

                     // If the value of the [Planned Outage End] column is less than the value

                     // of the [Planned Outage Start] column a value of the localizable string is

                     // placed into the variable along with the validation error message

                     // in the invalidMessage variable.

                    invalidMessage = this.get("Resources.Strings.EndLessThanStart");

                }

                 // Object whose properties contain validation error messages.

                 // If the validation is successful, empty strings are returned to the

                 // object.

                return {

                    // Validation error message.

                    invalidMessage: invalidMessage

                };

            },

            // Actual Work Validator

            actualWorkDateValidator: function() {

                // Variable for storing a validation error message.

                var invalidMessage = "";

                // Checking values in the [Actual Work End] and [Actual Work Start] columns.

                if (this.get("VvtActualWorkEnd") < this.get("VvtActualWorkStart")) {

                     // If the value of the [Actual Work End] column is less than the value

                     // of the [Actual Work Start] column a value of the localizable string is

                     // placed into the variable along with the validation error message

                     // in the invalidMessage variable.

//used the same invalidmessage for all functions since it applies the same

                    invalidMessage = this.get("Resources.Strings.EndLessThanStart");

                }

                 // Object whose properties contain validation error messages.

                 // If the validation is successful, empty strings are returned to the

                 // object.

                return {

                    // Validation error message.

                    invalidMessage: invalidMessage

                };

            },

            // Redefining the base method initiating custom validators.

            setValidationConfig: function() {

                // This calls the initialization of validators for the parent view model.

                this.callParent(arguments);

                // The dueDateValidator() validate method is added for the [Planned Work End] column.

                this.addColumnValidator("VvtPlannedWorkEnd", this.dueDateValidator);

                // The dueDateValidator() validate method is added for the [Actual Work Start] column.

                this.addColumnValidator("VvtPlannedWorkStart", this.dueDateValidator);

                

                // Outage Method Added

                this.addColumnValidator("VvtPlannedOutageEnd", this.outageDateValidator);

                this.addColumnValidator("VvtPlannedOutageStart", this.outageDateValidator);

                

                // Actual Work Method Added

                this.addColumnValidator("VvtActualWorkEnd", this.actualWorkDateValidator);

                this.addColumnValidator("VvtActualWorkStart", this.actualWorkDateValidator);

            },

},

?? yes, that is the correct approach (to have only one setValidationConfig and wire up the validation for all in that same function (as you've done)