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

v1101
Level 5
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
Anudeep_Garnepudi
Correct answer by
Community Advisor
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
Veena_Vikram
Community Advisor
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.

v1101
Level 5
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"); } }) }
Anudeep_Garnepudi
Correct answer by
Community Advisor
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

v1101
Level 5
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.