Expand my Community achievements bar.

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.