如果验证失败，则显示div

我想要此div显示表单验证是否失败。如果验证失败，则显示div

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

我试图把它包里面

if(! ViewData.ModelState.IsValid)

，但在提交表单时，不显示DIV。可能是因为没有发回应有的jquery验证。验证逻辑看起来不错，如果我删除if语句验证摘要列表所有不正确的输入字段。

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

来源

2012-10-24 dbd

您可以应用这个简单的脚本。这不是很复杂，但它应该诀窍

$(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 
    }); 
});

正如你所看到的，这实际上并不关心验证。只需点击提交按钮，就可以看到'alert'div。如果有验证错误，div会显示您的警告。如果表单有效，我假设刷新或重定向，因此div永远不会有机会显示。

来源

2012-10-24 13:31:44

您的解决方法具有正确的用户体验，因此我将其upvoted它。但是，这感觉就像我错过了一些东西。谁希望在表单完成之前输出错误信息“（修正这些错误）”。感觉像“@ Html.ValidationSummary”应该有一些切换可见性机制... – dbd

是的。然而，如果你只是不把@ Html.ValidationSummary包装在一个div中，它会隐藏自己，直到需要... –

你确定吗？当我开始验证时，我通过它自己离开了@ Html.ValidationSummary'，没有div，文本'修复这些错误'是从一开始就有的。 – dbd

更新

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

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

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

来源

2012-11-08 17:03:24 dbd

如果验证失败，则显示div

回答

相关问题