Validation length component depending on chosen h1/h2 - html

Question

Where is a correct place in code to write validation(adding maximum lenght on text field) depending on two diference input's. User can chose an textfield size between h1 or h2. When user chose h1 I want to limit text to 10 elements, when chose h2 limit will be 7 elements. I use AEM 6.2.
I try to Validate an htl file, validate an cq_dialog.When I try to validate an htl file I have an problem with implementation ( it doesn't work), but in cq_dialog.xml file I can only validate an text label once, and I can't change a logic that my validation was change depending which size of text user chose.
This is My cq_dialog code and the most comfortable for me will be adding all logic here but I don't know this is posible?
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Text"
sling:resourceType="cq/gui/components/authoring/dialog">
<content jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
name="./title"
fieldLabel="Text"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="Max 10 elements"
/>
<type
sling:resourceType="granite/ui/components/foundation/form/select"
fieldLabel="Type"
name="./type"
jcr:primaryType="nt:unstructured"
>
<items jcr:primaryType="nt:unstructured">
<h1 jcr:primaryType="nt:unstructured" text="H1" value="h1"/>
<h2 jcr:primaryType="nt:unstructured" text="H2" value="h2"/>
</items>
</type>
</items>
</column>
</items>
</content>

Answer 1

You have to create a clientlib and add JS to register a validator for this use case. The clientlib's category must be referenced by the dialog. Using some OOTB category used by the dialog like 'cq.authoring.editor' will make your clientlib work for dialog validation.
Once you have the clientlib set up, register the validator with the granite framework. Refer https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/validation/index.html#validator on how to register the validator.
Here's a sample of how you can do this for your usecase.
var foundationRegistry = $(window).adaptTo("foundation-registry");
foundationRegistry.register("foundation.validation.validator",{
selector: "[name='./title']",
validate: function(el){
var text = el.value;
var type = $("[name='./type']").val();
var limit = type === 'h1' ? 10 : 7;
var numberOfElements = getNumberOfElements(text); //not sure what number of elements means in your context
if(numberOfElements > limit){
return "The input cannot exceed "+limit+ " elements for type "+type;
}
//the field is considered invalid if this method returns a string,
// the string returned is also used as the error message.
}
});
* the code has not been tested
Since the category of the clientlib is generic, this validator will be bound for all dialogs. You can either make the selector of the field more specific or change the clientlib category and explicitly reference it only on this dialog.