Making a field in aem touch dialog mandatory

[Raghava_Joijode]

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.

[kautuk_sahni]

Hi 

Please have a look at this community article:-

Link:- http://www.nateyolles.com/blog/2016/02/aem-touch-ui-custom-validation

// 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 :- 

Link:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

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

Link:- http://stackoverflow.com/a/35904476/6433590

// 

Use $.validator.register to register custom validators.

I have written a detailed blog post on writing custom validators: http://www.nateyolles.com/blog/2016/02/aem-touch-ui-custom-validation.

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 https://github.com/nateyolles/aem-touch-ui-validation.

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

[codingStar · Accepted solution]

I am using aem6.2 and working code is  

required="true"