Touch UI Custom Validation and Preventing Form Submission

[stuartcl]

Is there a method to use the Granite UI's validation service to actually stop a form from being submitted?

For example: I want to validate a field named tabAnchor against a regex. I produce the following javascript, leveraging the Granite API.

(function($, Granite) { "use strict"; var unitPattern = /^[a-zA-Z][a-zA-Z0-9]*/; /** * A validation for tabAnchor */ $.validator.register({ selector: '.field-tabAnchor', validate: function(el) { var valid = unitPattern.test(el.val()); if (!valid) { return Granite.I18n.get("Must be valid tabAnchor name"); } } }); })(Granite.$, Granite);

This creates a warning triangle that has an error message when you mouse over it. However, this does not prevent me from submitting invalid data.

I have experimented with various placements of preventDefault/stopPropagation with no success. Any help is welcome.

[kautuk_sahni]

We have asked internal team to look at this.

You will sooner get some help on this.

Thanks and Regards

Kautuk Sahni

[Lokesh_Shivalingaiah · Accepted solution]

You may have to write your custom logic to do the same.

Keep a count of errors if you have any in the form and disable the 'submit' button until you have count zero.

[kautuk_sahni]

Hi

As mentioned by Lokesh, you need to write a custom logic to so the same.

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

                         http://adobeaemclub.com/aem-touch-ui-dialog-validation/

Thanks and Regards

Kautuk Sahni