Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Multifield validation

Avatar

Level 5

Hello - I have a composite multifield which has the below fields. Based on the checkbox selection (If I uncheck), I am making the Product URL field as mandatory which has all the required elements ( aria-required="true"). If I don't select the URL/Type the URL, it is still letting me to submit the dialog which shouldn't happen. But if I enter a space, it is showing as mandatory. is there any way to handle this ?

 

 

v1101_0-1612229860020.png

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@v1101 

Try the below snippet.

 

$(document).on("change", ".aciveproduct", function(e) {
    if($(this).prop("checked")) {
        $(this).closest(".coral3-Multifield-item").find("foundation-autocomplete").removeAttr("required");
    } else {
        $(this).closest(".coral3-Multifield-item").find("foundation-autocomplete").attr("required", "required");
    }
});

 

Hope this works. 

View solution in original post

5 Replies

Avatar

Community Advisor

Do you have a jquery you have written to handle the same ? I doubt there is something wrong with the logic you have written to make the fields mandatory.

Avatar

Level 5
PFB $(document).on("change", ".aciveproduct", function (e) { $(this).parent().find('.coral-InputGroup .coral3-Textfield.coral-InputGroup-input').attr("aria-required", "true"); testproduct($(this)); }); function testproduct(el) { var checkBoxLength = $(".aciveproduct").filter(':checked').length; $('.currentpage').each(function (i, element) { if (checkBoxLength > 0) { if ($(element).attr("type") === "checkbox") { if ($(element).prop('checked')) { $(element).parent().find('.coral-InputGroup .coral3-Textfield.coral-InputGroup-input').attr("aria-required", "false"); } } } else { $(element).parent().find('.coral-InputGroup .coral3-Textfield.coral-InputGroup-input').attr("aria-required", "true"); } }) }

Avatar

Correct answer by
Community Advisor

@v1101 

Try the below snippet.

 

$(document).on("change", ".aciveproduct", function(e) {
    if($(this).prop("checked")) {
        $(this).closest(".coral3-Multifield-item").find("foundation-autocomplete").removeAttr("required");
    } else {
        $(this).closest(".coral3-Multifield-item").find("foundation-autocomplete").attr("required", "required");
    }
});

 

Hope this works. 

Avatar

Level 5
@Anudeep_Garnepudi - The aria-required attribute is applied when I change the checkbox option but it is letting me to submit the dialog with no data in it. If I hit a space on the textfield, then it is not letting me to submit the dialog saying that it is a required field.