如何使用Javascript显示和隐藏验证消息

Question

在以下代码中，如果我只选择MonthDropdown值而不选择YearDropdown，则应显示验证消息。

如果我选择YearDropdown值而不选择MonthDropdown值，则应显示验证消息。

如果我同时选择两个下拉值，则应隐藏该消息。

我试过自己，但我无法得到正确的结果。

<div class="field field--with-dropdown clearfix" style="height: 50px;">
    <label for="field-country" >Expiry date</label>
    <div class="select--half" style="padding-top: 10px;">
        @Html.Kendo().DropDownListFor(x=>x.ExpiryMonth).BindTo(months).Events(x => x.Change("checkout.onMonthYearDDlChange")).DataValueField("Value").DataTextField("Text").OptionLabel("Valid Till Month").HtmlAttributes(new{ required = "required", data_required_msg = " Expiry Month is Required",@class="expmonth" })
        @Html.Kendo().DropDownListFor(x => x.ExpiryYear).BindTo(years).Events(x=>x.Change("checkout.onMonthYearDDlChange")).DataValueField("Value").DataTextField("Text").OptionLabel("Valid Till Year").HtmlAttributes(new { required = "required", data_required_msg = " Expiry date is Required", @class = "expyear"})
        @Html.ValidationMessageFor(x=>x.ExpiryMonth, "", new { @class = "text-danger expmonth",id="expirymonth" })
        @Html.ValidationMessageFor(x => x.ExpiryYear, "", new { @class = "text-danger", id = "expiryyear" })
    </div>
</div>

CSS

<style>
    span#expirymonth {
    display: none !important;
    }
</style>

的Javascript

var expMonth = $("#Billing_ExpiryMonth").val();
var expYear = $("#Billing_ExpiryYear").val();

if (expMonth !== "" && expYear !== "") {
    $("#expiryyear").hide();
} else {
    $("#expiryyear").show();
}