AEM Touch UI Custom Validation

Nate Yolles | February 25, 2016 | 999 comments |

Adobe Experience Manager's Touch UI provides a straightforward validation framework making it simple to create custom form element validators as well as to interface with them programmatically. This blog post details the inner workings of the AEM Touch UI Validation Library which provided unobtrusive validation and enhanced functionality to AEM's Granite UI foundation dialog components.

Custom Multifield validation in AEM's Touch UI dialog.

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 following example creates a custom validator for phone numbers in a Touch UI dialog. Note that show and clear methods are not necessary in this example as the validator would use the default AEM provided methods, however, they are included for reference.

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.

The show and clear properties are functions that update the UI when when the form element is determined to be invalid or valid respectively. Each function makes two parameters available, the form element as a jQuery object and the validation message.

The selector property is obviously required, otherwise the validator can never be called. However, the validate, show and clear are optional. For example, if a form element is already being validated through an existing validator, you can update the UI behavior of the error message by registering a new validator with only show and clear functions. Order of registration is important; the last validator registered is the first validator used. View the Granite UI Validation documentation for further information. AEM's default validators are located at /libs/granite/ui/components/foundation/clientlibs/foundation/js/validation/validations.js .

The most obvious reason for providing custom show and clear functions is to validate a custom dialog component. For example, in the AEM Touch UI Validation Library, the two functions are used in the multifield validator as the field used is an HTML textbox to validate and it's not in the same HTML structure as the other HTML textboxes that the default AEM validator has already registered.

The benefit of using the provided jQuery.validator plugin is that it becomes trivial to create custom validation with a consistent UI provided by AEM out-of-the-box. As you write your custom validators, note that the jQuery.validator plugin attempts to mimic the default HTML5 validation and more importantly, note that hidden fields are not validated.

AEM provides a simple jQuery API to interact with form elements:

Using the principles described in this blog post, I've created the AEM Touch UI Validation Library to provide enhanced validation to Granite dialog components such as the multifield, browserpath, radiogroup and autocomplete.

999 comments

Matthieu | March 01, 2016 at 11:57 PM | Reply

Very cool! The promise of easier component dialogs in Touch UI is starting to play out. Thanks for this write-up.

Hi, Small help | March 12, 2016 at 12:18 PM | Reply

Can you help me on this question on adobe forum: http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__kgnt-hi_experts_cana.html

AEM | May 17, 2016 at 03:56 PM | Reply

Hi Nate, great article! I am using a custom multifield containing a pathfield and a textfield and want to add validation to ensure both are entered by the user before they submit the dialog. Would you be able to share how you would enable 'required' for fields within a custom multifield?

Raj | October 28, 2016 at 07:51 AM | Reply

Hi Nate, really liked the way you have explained the validation, helped me to understand the mechanism :). However now i am trying to figure out if there is any way to get the overall form validity status. Is there any method or does it fire any event if the form is validated as true or false. Thanks

Dean Anderson | February 08, 2017 at 04:22 PM | Reply

Hi Nate, I'm not able to get this validation to work. I have the categories set to "cq.authoring.dialog" but I do not see the red box when I have invalid content. Any thoughts? -Dean

EnochDep | February 10, 2020 at 12:30 AM | Reply

Ð·Ð´Ð¾Ñ Ð¾Ð²Ñ Ðµ : Ð Ñ Ð¸Ð¼ÐµÐ½ÐµÐ½Ð¸Ðµ Ð Ð Ð https://preparation.su/fito.html -Ð¤Ð¸Ñ Ð¾Ñ ÐµÑ Ð°Ð¿Ð¸Ñ Ð¤Ð¸Ñ Ð¾Ñ ÐµÑ Ð°Ð¿Ð¸Ñ .

MatAscedo | April 09, 2020 at 09:40 PM | Reply

Stendra Ed Saturday Delivery http://cialibuy.com/# - Cialis Cod generic isotretinoin direct discount amex accepted <a href=http://cialibuy.com/#>cialis buy online usa</a> Levitra Alcolici

MatAscedo | April 15, 2020 at 08:17 AM | Reply

Canadian Health Club Viagara https://apcialisle.com/# - Cialis Can Clamydia Meds Be Bought Online <a href=https://apcialisle.com/#>Cialis</a> Buying Anipryl Without A Prescription

viagra suppliers | June 02, 2020 at 06:27 AM | Reply

viagra without a doctor prescription [url=https://viagenupi.com/#]viagra suppliers[/url] buy viagra professional viagra suppliers how much does the military spend on viagra https://viagenupi.com/

how long does viagra last | June 03, 2020 at 08:51 PM | Reply

how long does viagra last http://viacheapusa.com/

cephalexin | June 03, 2020 at 11:52 PM | Reply

cephalexin https://keflex.webbfenix.com/

hydroxychloroquine for sale canada | June 16, 2020 at 12:23 PM | Reply

hydroxychloroquine for sale canada https://chloroquine1st.com/

sildenafil citrate tablets | June 17, 2020 at 10:23 AM | Reply

Excellent article. Keep posting such kind of information on your site. Im really impressed by it. Hey there, You've performed a fantastic job. I'll certainly digg it and individually recommend to my friends. I'm sure they will be benefited from this website. https://viatribuy.com/

levitra vs viagra | June 17, 2020 at 04:10 PM | Reply

levitra vs viagra http://viacheapusa.com/

buy hydroxychloroquine | June 17, 2020 at 05:20 PM | Reply

buy hydroxychloroquine https://azhydroxychloroquine.com/

hydroxychloroquine price in india | June 18, 2020 at 04:47 AM | Reply

hydroxychloroquine price in india https://azhydroxychloroquine.com/

cvs pharmacy acetaminophen | June 18, 2020 at 05:15 PM | Reply

If you desire to take a great deal from this paragraph then you have to apply these techniques to your won weblog. https://tylenol1st.com/

https://careprost.confrancisyalgomas.com | June 18, 2020 at 09:51 PM | Reply

https://careprost.confrancisyalgomas.com https://careprost.confrancisyalgomas.com/

tadalafil 5mg | June 19, 2020 at 08:40 AM | Reply

tadalafil 5mg http://genericalis.com/

cheap online viagra | June 20, 2020 at 02:29 AM | Reply

cheap online viagra http://www.doctor7online.com/

generic viagra online | June 20, 2020 at 06:05 AM | Reply

generic viagra online http://viacheapusa.com/

generic viagra without subscription | June 20, 2020 at 02:59 PM | Reply

A person necessarily help to make seriously articles I would state. This is the very first time I frequented your website page and thus far? I amazed with the research you made to make this actual publish amazing. Magnificent job! http://www.vagragenericaar.org/

can i buy cialis without a prescription | June 20, 2020 at 11:56 PM | Reply

Greate Post. Go on piece of writing such kind of information on your Page. Im in truth impressed by your blog. Hey there, You give done a howling business. I'll in spades digg it and in my opinion hint to my friends. I am positive they'll be benefited from this situation. http://www.cialisles.com/

viagra for sale | June 21, 2020 at 04:05 AM | Reply

Just desire to say your article is as surprising. The clarity in your post is just great and i can assume you are an expert on this subject. Well with your permission let me to grab your feed to keep up to date with forthcoming post. Thanks a million and please continue the rewarding work. http://viacheapusa.com/

Aenconsishiny | June 21, 2020 at 08:44 PM | Reply

<a href="https://cialisle.com/">cialis otc</a>

cenforce 2000 | June 22, 2020 at 01:59 AM | Reply

cenforce 2000 http://cavalrymenforromney.com/

what happens if a girl takes cialis | June 22, 2020 at 08:33 PM | Reply

How-do-you-do! I earn this is genial of off-issue just I had to necessitate. Does working a well-firm web site equal yours demand a monumental total puzzle out? I am entirely young to written material a web log only I do write in my diary each day. I'd equal to get down a web log so I fanny ploughshare my grammatical category get and feelings online. Please lease me roll in the hay if you throw whatsoever sort of ideas or tips for firebrand freshly aspirant bloggers. Take account it! http://www.cialisles.com/

inexpensive viagra pills | June 23, 2020 at 01:14 AM | Reply

inexpensive viagra pills https://mymvrc.org/

how long does cialis last | June 23, 2020 at 03:45 PM | Reply

I absolutely love your website.. Very nice colors & theme. Did you build this amazing site yourself? Please reply back as I'm looking to create my own website and would love to know where you got this from or what the theme is named. Thank you! https://www.wisig.org/

cialis dosing | June 23, 2020 at 09:38 PM | Reply

cialis dosing http://www.cialislex.com/

can i buy viagra online | June 24, 2020 at 01:24 AM | Reply

I really like it when folks come together and share opinions. Great blog, stick with it! https://mymvrc.org/

how long does cialis last | June 24, 2020 at 10:10 AM | Reply

Hi Dear, are you actually visiting this web site regularly, if so after that you will without doubt get good knowledge. https://www.wisig.org/

https://bimatoprostonline.confrancisyalgomas.com | June 24, 2020 at 01:08 PM | Reply

https://bimatoprostonline.confrancisyalgomas.com https://bimatoprostonline.confrancisyalgomas.com/

cialis no prescription | June 24, 2020 at 03:51 PM | Reply

cialis no prescription http://www.cialislex.com/

naltrexone 50mg cost | June 24, 2020 at 07:40 PM | Reply

naltrexone 50mg cost https://naltrexoneonline.confrancisyalgomas.com/

https://bimatoprostonline.confrancisyalgomas.com | June 24, 2020 at 10:41 PM | Reply

https://bimatoprostonline.confrancisyalgomas.com https://bimatoprostonline.confrancisyalgomas.com/