根据验证结果切换元素可见性

给定以下HTML

<form class="form-horizontal"
      asp-controller="Installation"
      asp-action="CreateUser"
      method="post">
    <fieldset>
        <!-- Form Name -->
        <legend>Account Creation</legend>
        <!-- Username input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="userName">Username</label>
            <div class="col-md-4">
                <input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
                <span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
                <span class="has-error" asp-validation-for="UserName"></span>
            </div>
        </div>
        <!-- Email input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="email">E-mail</label>
            <div class="col-md-4">
                <input id="email"
                       name="email"
                       type="text"
                       placeholder="jane@doe.com"
                       class="form-control input-md"
                       required=""
                       asp-for="Email">
                <span class="help-block">Enter your e-mail address</span>
            </div>
        </div>
        <!-- Password input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="password">Password</label>
            <div class="col-md-4">
                <input id="password"
                       name="password"
                       type="password"
                       placeholder="password"
                       class="form-control input-md"
                       required=""
                       asp-for="Password">
                <span class="help-block">Enter a password that is at least 8 characters, fewer than 30</span>
            </div>
        </div>
        <!-- Password input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="confirmPassword">Confirm Password</label>
            <div class="col-md-4">
                <input id="confirmPassword"
                       name="confirmPassword"
                       type="password"
                       placeholder="password"
                       class="form-control input-md"
                       required=""
                       asp-for="PasswordConfirmation">
                <span class="help-block">Re-enter your password</span>
            </div>
        </div>
        <!-- Submit -->
        <div class="form-group">
            <label class="col-md-4 control-label"
                   for="createAccount"></label>
            <div class="col-md-4">
                <button id="createAccount" type="submit" name="createAccount" class="btn btn-primary">Create Account</button>
            </div>
        </div>
    </fieldset>
</form>

我想隐藏/显示usernameTip跨度，当asp-validation-for跨度包含验证错误时，以及任何其他跨度，当有相邻的asp-validation-for跨度时，我正在使用作为提示。

阅读这篇文章，我可以得到显示/隐藏跨度所需的JavaScript。我唯一不能弄清楚的是，如果视图实际上知道庄园中的验证错误，如果错误存在，则允许我有条件地隐藏/显示usernameTip span。

有没有人知道我需要做什么，以便根据我的模型上的数据注释错误切换可见性?

在Chrome中查看时，asp-validation-for span在编译时变成了这个:

<span class="has-error field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">Usernames must be between 2 and 50 characters</span>

编辑

当验证失败时，在末尾添加一个==$0。

用户名必须在2到50个字符之间== $0

当验证失败时，我没有看到任何类被添加或从span中删除。

编辑2

我用公认的答案得到了这个工作。然而，对于那些在未来，你可以使用MVC的ViewData属性在视图来确定是否有错误。

<div class="col-md-4">
    <input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
    @if (ViewData.ModelState[nameof(AccountCreationViewModel.UserName)] == null || ViewData.ModelState[nameof(AccountCreationViewModel.UserName)].Errors.Count == 0)
    {
        <span class="help-block">Enter a unique Username</span>
    }
    else
    {
        <span class="label label-danger" role="alert" asp-validation-for="UserName"></span>
    }
</div>