Hi All,
I have written custom validation on multifield and have registered validator for the same, my validations are working fine while interacting with the fields (textfield and pathbrowser) but on click of "Add Field" button my validator is not getting invoked so author is allowed to submit blank fields in the dialog but is getting restricted only while interacting with the fields. Can you please help how can I bind my validator to the addfield button?
Here is my dialog xml and validation Js:-
Dialog.xml
*********************************************************************************************************************
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:rep="internal"
jcr:mixinTypes="[rep:AccessControllable]"
jcr:primaryType="nt:unstructured"
jcr:title="Global Header"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="cws-coral-lager-column">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<multilist
jcr:primaryType="nt:unstructured"
jcr:title="Login Links"
sling:resourceType="granite/ui/components/foundation/section">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"
method="absolute"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<list
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/multifield"
class="foundation-layout-util-maximized-alt">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fieldset"
acs-commons-nested="JSON_STORE"
name="./field">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
method="absolute"/>
<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"
sling:resourceType="granite/ui/components/foundation/form/textfield"
class="field-alphanumeric custom-required"
fieldLabel="Title *"
name="./title"
validation="validation.requiredfield"/>
<link
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
class="custom-required"
fieldLabel="Link"
name="./link"
validation="validation.requiredfield"/>
<linkTarget
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
fieldDescription="Please check for opening the link in same window."
name="./linkTarget"
text="Want to open link in same window?"
uncheckedValue="false"
value="_self"/>
</items>
</column>
</items>
</field>
</list>
</items>
</column>
</items>
</multilist>
</items>
</column>
</items>
</content>
</jcr:root>
*********************************************************************************************************************
validation Js:-
**************************************************************************************************************
(function() {
var REGEX_SELECTOR = "validation.requiredfield";
var fieldErrorEl = $("<span style='color:red' class='span-multifield-error'/>"),
cmf = this,
selector = "[data-validation='" + REGEX_SELECTOR + "']";
$.validator.register({
selector: selector,
validate: validate
});
function validate($el) {
var $multifield = $el.closest(".coral-Multifield"),
$inputs = $multifield.find("input, textarea"),
$input, isRequired, isAlphaNumeric, message = null;
var regexAlphaNum = /^[A-Za-z0-9 ]+$/;
$inputs.each(function(index, input) {
$input = $(input);
isRequired = $input.hasClass("custom-required") || $input.parents(':eq(1)').hasClass("custom-required");
isAlphaNumeric = $input.hasClass("field-alphanumeric");
if (isRequired && $input.val().length === 0) {
$input.addClass("is-invalid");
message = "Please fill the required multifield items";
var $errorSpan = $input.closest('div.coral-Form-fieldwrapper').children('span.span-multifield-error');
console.log($multifield);
$errorSpan.remove();
var $labelElement = $input.closest('div.coral-Form-fieldwrapper').children('label.coral-Form-fieldlabel');
fieldErrorEl.clone().text(message).insertAfter($labelElement);
} else if (isAlphaNumeric && !regexAlphaNum.test($input.val())) {
$input.addClass("is-invalid");
message = "Please fill the alphanumeric";
var $errorSpan = $input.closest('div.coral-Form-fieldwrapper').children('span.span-multifield-error');
console.log($multifield);
$errorSpan.remove();
var $labelElement = $input.closest('div.coral-Form-fieldwrapper').children('label.coral-Form-fieldlabel');
fieldErrorEl.clone().text(message).insertAfter($labelElement);
} else {
$input.removeClass("is-invalid");
var $errorSpan = $input.closest('div.coral-Form-fieldwrapper').children('span.span-multifield-error')
console.log($multifield);
$errorSpan.remove();
}
});
if (message) {
$(".cq-dialog-submit").attr("disabled", "disabled");
} else {
$(".cq-dialog-submit").removeAttr("disabled");
}
return message;
}
validate($($(selector)[0]));
})();
**************************************************************************************************************
I have set categories to clientlib as cq.authoring.dialog.
