AEM6 | Input Field validation

AEM6 uses Coral UI framework for touch UI rendering. So if you need to implement field validation, you should register a validator on that field supported by Coral UI. Refer the below example-

Sample code to implement mandatory validation on an Input field with trim function-

1. In your component field properties add two new properties- validation-trim (Set value to true) and trimMessage (Set value to the validation message). Look at the screenshot below-

2. Create a clientLibs Folder with category- "cq.authoring.dialog" and add a JS file having following code-

;(function ($, $document) {
    "use strict";

$document.on("dialog-ready", function() {

//Register Trimmed Value Validator

$.validator.register({

selector: "[data-validation-trim]",

validate: function(el) {

var length = el.val().trim().length;

if (length == 0) {

var message = el.attr("data-trimMessage");

return message;

}

}

});

});

})($, $(document));


Once you have added this JS to your page, you can call it in any number of fields. You just need to add two properties to the fields where you want validation as mentioned in Step 1 above.