Hello All,
I have a requirement to validate the value authored in a textfield inside a multifield. I am using ACS Commons multifield (multifield & multifieldpanel) to create the touch UI dialog.
I tried using two approaches :-
registry.register("foundation.validation.validator", {
selector: "[data-validation=font-color-multifield]",
validate: function(el) {
var field = el.closest(".coral-Multifield");
var fontColorField = field.getElementsByClassName("fontColor");
$.each(fontColorField , function(i , element) {
var value = element.value;
if (!/(^#[0-9A-Fa-f]{6}$)|(^#[0-9A-Fa-f]{3}$)/.test(value) && value != '') {
element.classList.add("is-invalid");
return false;
}else {
element.classList.remove("is-invalid");
}
});
----------------------------------------------------------------------------------------------------------
$(document).on("dialog-ready", function (e) {
$(".cq-dialog-submit").click(function() {
//var field = $(this).parent();
var field = $(this).closest("form.foundation-form");
var fontColorField = field.find("[name='./linkColor']");
$.each(fontColorField , function(i , element) {
var value = element.value;
if (!/(^#[0-9A-Fa-f]{6}$)|(^#[0-9A-Fa-f]{3}$)/.test(value) && value != '') {
element.classList.add("is-invalid");
var ui = $(window).adaptTo("foundation-ui");
ui.alert('The field must be in the format: "#xxxxxx" or "#xxx"');
return false;
}else {
element.classList.remove("is-invalid");
return true;
}
});
});
});
However in both cases the dialog gets submitted in-spite of the wrong value authored in the textfield. Any help will be highly appreciated.
Note: This works perfectly fine in a simple textfield outside a multifield.
Thanks in Advance
Ashish Ranjan
