Question

I have a problem displaying validation messages at the same time. In fact only one is showing write now:

$('input').bind('click', function(){
                var checkboxes_claimType = $("#field-claimType-wrapper").find("input:checked");
                if (checkboxes_claimType.length) {
                    $('#label-claimtype-wrapper label').css('color', 'black');
                    $('#searchValidationError').hide();
                }
                else {
                    $('#label-claimtype-wrapper label').css('color', 'red');
                    $('#searchValidationError').html('<p>Please select Claim Type</p>');
                    $('#searchValidationError').show();
                }
                var checkboxes_claimStatus = $("#field-claimStatus-wrapper").find("input:checked");
                if (checkboxes_claimStatus.length) {
                    $('#label-claimstatus-wrapper label').css('color', 'black');
                    $('#searchValidationError').hide();
                }
                else {
                    $('#label-claimstatus-wrapper label').css('color', 'red');
                    $('#searchValidationError').html('<p>Please select Claim Status</p>');
                    $('#searchValidationError').show();
                }
            });

The else statement in the first condition is overriding the else statement in the second condition what is the best way to resolve this?

Answer 1

you should use different divs for each error to show (with different IDs), this way they won’t conflict each other.