AEM Dialog Field Validations

 

Validation -> Hide and show field based on dropdown select

Assume there is a dropdown called My platform with property name as "myPlatform"

It has two values platform1 & platform2

Requirement is if I select platform 1 then field call "Title" should get hidden

and if I select platform2 then field call "Title" should be visible.

Add below property in Title field

granite:class [String] my-title

And add below validations in js file

Pre requisites:

In Dialog add clientlib by adding property -> extraClientlibs String[] core.my.testclientlib

In client lib folder add property -> categories String[] core.my.testclientlib

Paste below JS in this clientlib js file

(function ($, Granite, ns, $document) {

"use strict";

// This function gets triggered to hide and show fields when dialog loads

function showhidebasedonplatform() {

        if($("coral-select[name='./myPlatform']").val() == 'platform1'){

            $(".my-title).hide();

        }else{

            $(".my-title").show(); 

        }

}

// This function gets triggered to hide and show fields when platform is changed

function showhidebasedonplatformonload() {

var myPlatformSelected = $("coral-select[name='./myPlatform']").val();

if (myPlatformSelected == 'platform2') {

$(".my-title").show();            

} else {

$(".my-title").hide();

}

}

$document.on("foundation-contentloaded", function (e) {

// This method gets triggered when platform is changed or loaded

Coral.commons.ready($("coral-select[name='./myPlatform']"), function () {

showhidebasedonplatformonload();

});

$("coral-select[name='./myPlatform']").change(function () {

showhidebasedonplatform();

});

});

}(jQuery, Granite, Granite.author, jQuery(document)));