How to add validators for letters check?

[Vodjakxa]

How to add validators in a multifield with two textfields such that it only accepts letters in the fields? Possibly using js

[arunpatidar]

Hi @Vodjakxa 

Please check https://www.albinsblog.com/2018/09/how-to-enable-custom-validation-on-multifield-touch-ui-aem.html 

[konstantyn_diachenko]

Hi @Vodjakxa ,

I'd suggest using Field Validation in Granite UI: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...

Example of JS client library (categories: cq.authoring.dialog.all):

(function ($, window) {

    const registry = $(window).adaptTo("foundation-registry");
    registry.register("foundation.validation.validator", {
        selector: "[data-validation=letter-match]",
        validate: function (el) {
            const element = $(el);
            const letter = element.data('letter');
            const value = element.val();

            if (value.length !== 0 && letter && !value.includes(letter)) {
                return "The field must contain letter: " + letter;
            }
        }
    });
})
(jQuery, window);

Example of usage in dialog:

<myField
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldDescription="Some description"
    fieldLabel="Some label"
    name="./myField"
    validation="letter-match">
    <granite:data
        jcr:primaryType="nt:unstructured"
        letter="A"/>
</phone>

Best regards,

Kostiantyn Diachenko.