> structure:

> ui.apps
  > src/main/content/jcr_root/apps/flagtick/components
  > src/main/content/jcr_root/apps/flagtick/components/content/my-login-comp
  > src/main/content/jcr_root/apps/flagtick/components/content/my-login-comp/clientlibs
  > src/main/content/jcr_root/apps/flagtick/components/content/my-login-comp/clientlibs/.content.xml
  > src/main/content/jcr_root/apps/flagtick/components/content/my-login-comp/clientlibs/editor
  > js
    > textfieldvalidation.js
  > css
    > textfieldvalidation.css
  > .content.xml
  > js.txt
  > css.txt  

> js.txt:

#base=js
textfieldvalidation.js

> css.txt:

#base=css
textfieldvalidation.css

> textfieldvalidation.js:

/* global jQuery, Coral */
(function($, Coral) {
    "use strict";
    var registry = $(window).adaptTo("foundation-registry");
    registry.register("foundation.validation.validator", {
        selector: "[data-validation=flagtick-multifield]",
        validate: function(element) {
            var el = $(element);
            let max=el.data("max-items");
            let min=el.data("min-items");
            let items=el.children("coral-multifield-item").length;
            let domitems=el.children("coral-multifield-item");
            if(items>max){
              return "You can add maximum "+max+" books. You are trying to add "+items+"th book."
            }
            if(items<min){
                return "You add minimum "+min+" books."
            }
        }
    });

    registry.register("foundation.validation.validator", {
        selector: "[data-validation=flagtick-tooltip-validation]",
        validate: function(element) {
            let el = $(element);
            let pattern=/[0-9a-z]/;
            let value=el.val();
            if(pattern.test(value)){
               return "Please add only Upper Case Letters in First name";
            }

        }
    });
})(jQuery, Coral);

> textfieldvalidation.css:

coral-multifield.flagtick-multifield[aria-invalid=true] {
  border: .15rem solid #e14132
}

> editor/.content.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:ClientLibraryFolder"
          categories="[flagtick.components.login.editor]"/>

> clientlibs/.content.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="sling:Folder"/>

> Structure:

> If we use for granite/ui/components/coral/foundation/form/textfield for single.

> _cq_dialog/.content.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Login Component"
          extraClientlibs="[flagtick.components.my-login-comp.editor]"
          sling:resourceType="cq/gui/components/authoring/dialog">
          /** TODO **/
</content>

> Apply in Single Field:

<tooltipStatus
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
	fieldLabel="Status Tooltip"
	validation="flagtick-tooltip-validation"
	name="./tooltipStatus"/>

Note: If you don't want to use validation value as flagtick-tooltip-validation. So, we can add fieldDescription and maxLength into cq:dialog AEM.

fieldDescription=""
maxLength=""

> For Multiple Field:

<navigation
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/well"
	fieldLabel="Navigation">
	<items jcr:primaryType="nt:unstructured">
		<navigation-items
			granite:class="geeks-multifield"
			jcr:primaryType="nt:unstructured"
			sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
			composite="{Boolean}false"
			fieldLabel="Navgiation Items"
			validation="flagtick-multifield">
			<field
				granite:class="cmp-teaser__editor-action"
				jcr:primaryType="nt:unstructured"
				sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
				name="./navigationItem"/>
			<granite:data
				jcr:primaryType="nt:unstructured"
				max-items="{Long}5"
				min-items="{Long}3"/>
		</navigation-items>
	</items>
</navigation>