Displaying error message depending on tabs containing the error

Question

I have a cshtml containing different tabs and each tabs contain a set of inputs which required validation.

What I want to do is that when I validate the input I display a single error message saying in which tab is the inputs empty.

For example, suppose I have 3 tabs : air, sea, road and that some inputs in all 3 tabs are empty. I will display an error message saying : Empty inputs in sea, air and road. If there are some empty inputs in air only, the error message will be Empty inputs in air.

I have the following jquery function :

    function ValidateRates() {
    var isValid = true;
    elementValidCount = 0
    $(".changeValue").each(function (index) {

        var rateValue = $(this).val();
        if (rateValue == 0 || rateValue =='') {
            elementValidCount++;
        }
    });
    if (elementValidCount > 0) {
        isValid = false;
        $("#emptyRateError").css("display", "flex").css("visibility", "visible");
    }
    return isValid;
    }

Each input has the class changeValue and the tabs are as follows:

<div class="mdl-tabs__tab-bar">
    <a href="#sea-panel" class="mdl-tabs__tab is-active">SEA<i class="icon-sea"></i><span class="mdl-tabs__ripple-container mdl-js-ripple-effect" data-upgraded=",MaterialRipple"><span class="mdl-ripple is-animating" style="width: 2146.98px; height: 2146.98px; transform: translate(-50%, -50%) translate(105px, 20px);"></span></span></a>
</div>

Any idea of how I can do this?