Touch UI Validation in AEM - using jQuery and Granite UI (Part 2)

In this post, you'll know how you can validate the fields in the touch ui dialog of AEM using jQuery logic for validation and Granite UI to prompt error.

To use foundation-validation validator for touch ui validation, refer this post.

The entire logic for validation can be written in JS code as shown below which you can put in clientlibs and add the categories of clientlibs as cq.authoring.dialog

For ex. I am doing the validation for a phone number field which accepts only 10 digit numbers in the dialog.

(function (document, $, ns) {
    "use strict";
    $(document).on("click", ".cq-dialog-submit", function (e) {
        e.stopPropagation();
        e.preventDefault();
 
        var $form = $(this).closest("form.foundation-form"),
            symbolid = $form.find("[name='./symbol']").val(),
               message, clazz = "coral-Button ",
         patterns = {
             symboladd: /^([0-9]{10})\.?$/i
        };

        if(symbolid != "" && !patterns.symboladd.test(symbolid) && (symbolid != null)) {
                ns.ui.helpers.prompt({
                title: Granite.I18n.get("Invalid Number"),
                message: "Please Enter a valid 10 Digit Phone Number",
                actions: [{
                    id: "CANCEL",
                    text: "CANCEL",
                    className: "coral-Button"
                }],
            callback: function (actionId) {
                if (actionId === "CANCEL") {
                }
            }
        });
        }else{
                 $form.submit();
        }
    });
})(document, Granite.$, Granite.author);

As seen from the above code snippet, you can get the dialog element value using name and apply the regex pattern test to validate the field and then with the Granite ui, you can prompt the validation fail message as shown below:

Touch UI Validation in AEM - using Foundation Validation (Part 1)

In this post, you'll know how you can validate the fields in the touch ui dialog of AEM.

Now that  jQuery based validator, i.e. $.validator.register() is deprecated, we'll be using foundation-validation.

To select the node/field in the dialog for validation, just add any validation attribute along with your value in the properties of that node. Then in the component field markup you'll be able to see that data-attribute added.

For ex. I have added the below validation attribute to my summary textfield-

and the field markup of the dialog now looks like:

Now, this data-attribute will act as the selector for validating that particular field.

Use the below JS code snippet which you can put in clientlibs and add the categories as cq.authoring.dialog

(function ($window) {

 $window.adaptTo("foundation-registry").register("foundation.validation.validator", {
  selector: "[data-myapp-maxlength]",
  validate: function(el) {
    var maxlength = parseInt(el.getAttribute("data-myapp-maxlength"), 20);

    if (isNaN(maxlength)) {return;}

    var length = el.value.length;
    if (length > maxlength) {
      return "The field needs to be maximum " + maxlength + " characters. 
              It currently has a length of " + length + ".";
    }
  }, 
 });

})($(window));

The dialog validation looks like this:

Here, based on the validation attribute added (data-myapp-maxlength=20) and the logic written in js, it will validate the field length and show the error if validation fails.

You can also add show() and clear() method for this foundation-validation by referring the below interface:

interface FoundationValidationValidator {
  /**
   * Only the element satisfying the selector will be validated.
   */
  selector: string;
  /**
   * The actual validation function. It must return a string of error message
   * if the element fails.
   */
  validate: (element: Element) => string;
  /**
   * The function to show the error.
   */
  show: (element: Element, message: string, ctx: FoundationValidationValidatorContext) => void;
  /**
   * The function to clear the error.
   */
  clear: (element: Element, ctx: FoundationValidationValidatorContext) => void;
}

Reference: https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/validation/index.html