CODEWITHSUNDEEP
javascriptjqueryadobeaem
Gabi
Gabi

Reputation: 687

How would you implement Adobe CQ client side validation for form fields?

I have implemented custom server side validation for form fields, so when the user specifies a constraint, the field will be validated on form submit. I would like to have client side validation as well, if possible at constraint level so that all that it needs to be configured on a field is the constraint. Example: show an error bellow the field on blur event if the field is invalid. I know i can also provide the script clientvalidation.jsp, but i don't understand how this is working because adding the script seems to have no effect.

Upvotes: 0

Views: 1431

Answers (2)

Shawn
Shawn

Reputation: 9402

Since you are dealing with the rendered page, I recommend you add client side validation using a standard validation library, such as the jQuery validation plugin:

jQuery Validation Plugin

It does what you are looking for, such as this sort of thing:

enter image description here

I've used this in CQ pages. Check out the video on that page--it gives a good demo of how to do just what you are looking for. And check out the demos page:

Demos

This isn't the only validation option, so you could also consider others. I think the key is to just approach this problem as a typical HTML/JavaScript need rather than a CQ need.

Also see Best JavaScript solution for client-side form validation and interaction?

Upvotes: 1

CptBartender
CptBartender

Reputation: 1220

You need to create a clientlib that contains JavaScript code that finds the proper form elements, attaches listeners to proper element events, performs the actual input validation within the listeners and finally displays appropriate messages on the page.

Upvotes: 0

Related Questions