Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list

Making a field in aem touch dialog mandatory


Level 3

How do I make a field in aem touch dialog as mandatory, I tried using required=true(Boolean) still it accepts even if value is empty.

1 Accepted Solution


Correct answer by
Level 4

I am using aem6.2 and working code is  

2 Replies




Please have a look at this community article:-


// AEM Touch UI Custom Validation

Here you can write any code for any validation check that you need. Registering custom validators is done by calling the jQuery based $.validator.register method. The register method takes a single JavaScript object literal argument. The parameter looks for four properties: selector, validate, show and clear, of which only selector is required. 

The  selector property ties the validator to the form elements on the page. The property accepts any jQuery selector such as a class ( .my-class-name), type ( INPUT) or attribute ( INPUT[type="text"]) selectors.
The  validate property is the function that validates the form element's input. The function provides the form element as a jQuery object as the single available parameter. The field is treated as invalid if this function returns a string literal as the validation error message.


More Reference posts :- 


// AEM6.2, Make Image field mandatory in Touch UI Dialog



Use $.validator.register to register custom validators.

I have written a detailed blog post on writing custom validators:

I have made a comprehensive Touch UI validation library available on GitHub that fixes the issue you described where the "required" property doesn't work for several Granite UI fields as well as other functionality. See

Essentially, you need to modify the field's HTML to include an HTML input that can be validated by either overlaying the foundation component or using JavaScript to modify the DOM when the dialog opens. A hidden input is not eligible for validation, so you need to add a text input hidden by CSS. Use JavaScript to update the "hidden" field when the component action is updated. For example, a color is chosen in the color picker.

Then you register the custom validator against the non-visible text input. Pass in the selector of the non-visible text field and the function that does the actual validation. Also pass in functions for show and clear that show and hide the error message/icon.

Thanks and Regards

Kautuk Sahni


Correct answer by
Level 4

I am using aem6.2 and working code is