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

Posted 2023-02-22

【中文标题】根据验证结果切换元素可见性

【英文标题】：Toggle element visibility based on validation results

【发布时间】：2016-11-05 17:57:18

【问题描述】：

给定以下 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="[e-mail]"
                       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>

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

阅读this post 我可以获得显示/隐藏跨度所需的 javascript。我唯一想不通的是，View 是否真的知道庄园中的验证错误，如果存在错误，我可以有条件地隐藏/显示 usernameTip 跨度。

有人知道我需要做什么才能根据模型上的数据注释错误切换可见性吗？

在 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

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

编辑 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>

【问题讨论】：

您能否在 devtools 中查看是否在 asp=validation-for span 出现错误时添加了任何类？

更新了 OP 以显示 span 类的样子

我再次更新了 OP。 Chrome 在结束标记的右侧显示具有== $0 的跨度。示例：<span></span> == $0 我不确定它代表什么

我认为我的回答可以解决问题，你可以给每个 span 一个特定的 id，然后检查 $("#span-error-id").text().indexOf("$0") ;

【参考方案1】：

<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 id="error" class="has-error" asp-validation-for="UserName"></span>
</div>
    <script>

   if( $("#error").text().length>0)
//show usernameTip 

</script>

【讨论】：

这将处理表单可能在不同跨度上存在 n 个错误的用例吗？我想我不是很清楚，我已经更新了我的帖子以更清楚。这个 javascript 是否仅限于那个 div？我是 JS 新手，所以不确定它的作用域