RadDataForm Custom Validation

If you followed the getting started section, you now know how to edit an object's properties with RadDataForm for NativeScript. From the validation overview you should have become acquainted with the validation feature in RadDataForm. This article will show you how to use custom validation in RadDataForm.

Custom Validators
Manual Validation
References

Custom Validators

If the validators provided by RadDataForm don't fulfil your requirements you can create your own validator. All you need to do, is create a class extending the PropertyValidator class and override its validate method. Here's a sample implementation that validates if the input has an exact content:

Example 1: Create a custom validator

export class ExactTextValidator extends PropertyValidator {
    constructor() {
        super();
        this.errorMessage = "Please enter: admin1";
    }

    public validate(value: any, propertyName: string): boolean {
        return value.toLowerCase() === "admin1";
    }
}

In order to use your validator, you can add it to your xml just like the other validators:

Example 2: Use a custom validator in RadDataForm

<df:EntityProperty name="username" index="0">
    <df:EntityProperty.validators>
        <v:ExactTextValidator />
    </df:EntityProperty.validators>
</df:EntityProperty>

Note that you will also need to point the location of your validator definition. For our example the declaration is this: xmlns:v=\"dataform/validation/custom-validator/exact-text-validator\", since our validator is defined in the exact-text-validator.ts file in the custom-validator directory.

Figure 1: Using a custom validator to validate input for username on Android (left) and iOS (right)

NativeScriptUI-DataForm-Validators-Custom-Android

Manual Validation

Another option is to manually notify RadDataForm for the validation state of its properties and not use the validators at all. Here's an example that manually validates the fields that require validation on a button tap and if they are valid, commits them:

Example 3: Custom validation

export function onTap() {
    let isValid = true;

    const p1 = dataform.getPropertyByName("username");
    const p2 = dataform.getPropertyByName("password");

    if (p1.valueCandidate.toLowerCase() !== "admin1") {
        p1.errorMessage = "Use admin1 as username.";
        dataform.notifyValidated("username", false);
        isValid = false;
    } else {
        dataform.notifyValidated("username", true);
    }

    if (p2.valueCandidate.toLowerCase() !== "pass1") {
        p2.errorMessage = "Use pass1 as password.";
        dataform.notifyValidated("password", false);
        isValid = false;
    } else {
        dataform.notifyValidated("password", true);
    }

    if (!isValid) {
        label.text = "Username and Password are not recognized.";
    } else {
        label.text = "";
        dataform.commitAll();

        alert(
            {
                title: "Successful Login",
                message: "Welcome, " + dataform.source.username,
                okButtonText: "OK"
            });

    }
}

Let's walk through that implementation. First, we are getting each EntityProperty that we want to validate. Then we check their valueCandidate. After we check this value, we call notifyValidated with true if the value is acceptable and with false otherwise. We are also setting the property's errorMessage to the text that we want to have displayed to inform the user why validation has failed. Finally, if all properties are valid, we commit the result and display a success message. Optionally, we show another message in the case of the failed validation, summarizing the validation errors.

Figure 2: Using a custom validation on button tap on Android (left) and iOS (right)

NativeScriptUI-DataForm-Validation-Custom-Android

References

Want to see this scenario in action? Check our SDK Examples repo on GitHub. You will find these and many other practical examples with NativeScript UI.

NativeScript Core