Multifield validation | Community
Skip to main content
v1101
Level 5
Feb 2, 2021 1:45 AM UTC
Solved

Multifield validation

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 ?

 

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Anudeep_Garnepudi
Anudeep_GarnepudiAccepted solution
New Participant
Feb 2, 2021 4:56 AM UTC

@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 reply

5 replies

Anudeep_Garnepudi
Anudeep_GarnepudiAccepted solution
New Participant
Feb 2, 2021 4:56 AM UTC

@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. 

Translate
    v1101Author
    Level 5
    Feb 2, 2021 2:33 PM UTC
    @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.
    Translate
    VeenaVikraman
    VeenaVikraman
    New Participant
    Feb 2, 2021 4:22 AM UTC

    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.

    Translate
      v1101Author
      Level 5
      Feb 2, 2021 2:28 PM UTC
      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"); } }) }
      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...