如果验证失败则显示 div答案

【问题标题】：Show div if validation fails如果验证失败则显示 div
【发布时间】：2012-10-24 09:48:02
【问题描述】：

我希望这个 div 显示表单验证是否不成功。

<div class="alert">
  <strong>Warning!</strong> @Html.ValidationSummary(false, "Fix these errors:")
</div>

我试着把它包裹在里面

if(! ViewData.ModelState.IsValid)

但提交表单时不显示div。可能是因为没有回发由于 jquery 验证。验证逻辑似乎没问题，如果我删除 if 语句验证摘要列出所有不正确的输入字段。

如何根据验证切换 div 的可见性？

【问题讨论】：

标签： validation razor asp.net-mvc-4 jquery-validate

【解决方案1】：

更新

我重写了接受的答案。如果服务器连接速度很慢，则在服务器请求期间将显示错误 div。即使没有错误。我更改了它以在提交表单时检查表单是否有效。这段代码 sn-p 假设你有一个表单。

$(document).ready(function () {
    $(".alert").hide(); //hides the div on page load

    $("form").submit(function () {
        if (!$(this).valid()) {
            $('.alert').show();
        }
    });        
});

【讨论】：

【解决方案2】：

您可以应用这个简单的脚本。它不是很复杂，但应该可以解决问题

$(document).ready(function () {
    $('.alert').hide(); //hides the div on page load
    $('#submit').click(function () {  //assumes your submit button has id="submit"
        $('.alert').show(); //shows the div when submit is clicked
    });
});

如您所见，这实际上并不关心验证。它只是在单击提交按钮时使“警报” div 可见。如果存在验证错误，则 div 将显示您的警告。如果表单有效，我假设刷新或重定向，因此 div 将永远没有机会显示。

【讨论】：

您的解决方法具有正确的用户体验，因此我赞成。然而，感觉就像我错过了什么。谁想在表单完成之前输出错误消息(Fix these errors)。感觉@Html.ValidationSummary 应该有一些切换可见性机制......
是的。但是，如果您只是不将 @Html.ValidationSummary 包装在 div 中，它将隐藏自己直到需要...
你确定吗？当我开始验证时，我自己留下了 @Html.ValidationSummary，没有 div，文本 Fix these errors 从一开始就在那里。
是的，我确定。如果再次发生，请将 bool 参数设置为 true 并查看正在抛出的字段。
完全正确，我以为我试过了。然后更容易接受包装 html 元素的限制。已接受答案。