lightswitch html client input validation not updated

Question

I have an input to enter some data and want to validate it using javascript. I use the following code:

myapp.AddEditHaendlerItem.beforeApplyChanges = function (screen) {


    // check PLZ
    if (screen.HaendlerItem.PLZ != "12345") {

        screen.findContentItem("PLZ").validationResults = [
            new msls.ValidationResult(
                screen.HaendlerItem.details.properties.PLZ,
                "PLZ muss eine Zahl und 5 Zeichen lang sein.")
        ];

        return false;

    }
};

But I do not know, how to remove the validation results. E.g if the user corrected the input the validation error still shows up. How can I remove it?

Thanks!

Answer 1

As the error isn't automatically removed from the content item's validationResults array, you need to manually remove it.

The approach we normally take is to add a dataBind change handler to the contentItem to reset the validationResults when the user 'tabs' off the entry. Any remaining errors will then be reapplied when the user saves and the beforeApplyChanges function executes.

The following snippet highlights such an approach: -

myapp.AddEditHaendlerItem.PLZ_postRender = function (element, contentItem) {
    contentItem.dataBind("value", function (value) {
        contentItem.validationResults = [];
    });
};

myapp.AddEditHaendlerItem.beforeApplyChanges = function (screen) {
    // check PLZ
    if (screen.HaendlerItem.PLZ != "12345") {
        screen.findContentItem("PLZ").validationResults = [
            new msls.ValidationResult(
                screen.HaendlerItem.details.properties.PLZ,
                "PLZ muss eine Zahl und 5 Zeichen lang sein."
            )
        ];
        return false;
    }
};

Also, if you'd like to provide the user with more immediate feedback, you could move the validation test into the change handler as follows: -

myapp.AddEditHaendlerItem.PLZ_postRender = function (element, contentItem) {
    contentItem.dataBind("value", function (value) {
        contentItem.validationResults = [];
        // check PLZ
        if (value != "12345") {
            contentItem.validationResults = [
                new msls.ValidationResult(
                    contentItem.details,
                    "PLZ muss eine Zahl und 5 Zeichen lang sein."
                )
            ];
        }
    });
};

This will perform the validation as the user 'tabs' off the entry rather than delaying the check until the user saves.