Expand my Community achievements bar.

SOLVED

Touch UI multifield - making a field mandatory

Avatar

Level 2

Is there a way to make one of the fields in a custom multifield mandatory in touch UI? would be helpful if there is any implementation reference of the cq:dialog for this.

1 Accepted Solution

Avatar

Correct answer by
Administrator

If you are using Touch UI for dialogs, you should add

    required="{Boolean}true"

If you are using old Ext Js dialogs, you should add

    allowBlank="false"

as a property to the dialog item.

Also have a look at this,

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.

~kautuk



Kautuk Sahni

View solution in original post

3 Replies

Avatar

Level 10

Hi,

Yes, as Scott stated, see this excellent article which shows how to make Touch UI multi-field mandatory. 

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

However, you can also use Adobe latest acs-aem-commons package for Touch UI multifield mandatory field to work.

See this for latest acs-aem-commons package here: https://adobe-consulting-services.github.io/acs-aem-commons/

Similar thread in GITHUB: https://github.com/Adobe-Consulting-Services/acs-aem-commons/issues/662

Hope this helps!

~Ratna.

Avatar

Correct answer by
Administrator

If you are using Touch UI for dialogs, you should add

    required="{Boolean}true"

If you are using old Ext Js dialogs, you should add

    allowBlank="false"

as a property to the dialog item.

Also have a look at this,

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.

~kautuk



Kautuk Sahni