ASP.NET 表单验证 - 使用 JS/DHTML 突出显示字段

Question

今天早上有一个问题一直困扰着我。我正在构建一个具有许多输入表单的 ASP.NET webforms 应用程序，并且我正在尝试标准化我管理验证的方式。我想使用内置的验证器（RequiredFieldValidator、Regex 等）。我的 html 要求是：

验证前：

<div class="formLine">
   <label for="fieldID">Form Label</label>
   <input type="text" id="fieldID" />
</div>

验证后（以防出错）：

<div class="formLine formError">
<label for="fieldID">Form Label</label>
<input type="text" id="fieldID" />
<span class="errorMessage">Please enter some value</span>
</div>

附加的 span 很好，这是通过 ASP.NET 验证控件实现的。我的问题是将 formError 类添加到包含<div>。

我很乐意使用 jQuery/DHTML 来添加这个类，但只是不知道在哪里挂钩它。是否可以使用 jQuery 监视 DOM 更改 - 例如，每当添加跨度时触发事件处理程序<div class="formLine"> 的孩子？

还有其他人对处理这个问题有什么好的建议吗？

感谢阅读。

Answer 1

编辑：澄清后

您可以编写由 onClick 客户端事件调用的自定义函数。因为您使用的是 ASP.Net 验证控件，所以您应该能够调用函数 ValidatorValidate(val)，其中 val 是验证器。然后，您可以检查验证器 SPAN 标记的内容是否存在验证错误，并相应地更新您的 div 标记。

注意：我不是客户端验证方面的专家，但这原则上应该有效。

Further info on MSDN.

---

您需要使用 id 标记将您的 div 声明为 runat="server"，以便您可以在服务器端代码中引用它，然后在页面加载中对 Page.IsValid 进行测试，如果您的验证器之一失败，它将返回 false生效日期。

然后您可以通过编程方式在您的 div 上设置类属性。比如：

<div class="formLine" id="divForm" runat="server">   
  <label for="fieldID">Form Label</label>   
  <input type="text" id="fieldID" />
</div>

代码隐藏 (VB)

If Not Page.IsValid Then
  divForm.Attributes.Remove("class")
  divForm.Attributes.Add("class", "formLine formError")
End If

Answer 2

我假设您正在寻找一种在客户端执行此操作而无需回发的方法。

当您在 Web 表单上使用 asp.net 验证控件时，您会注意到对 WebUIValidation.js 的脚本引用呈现在您的页面上。窥视该文件提供了一些有用的信息。该文件中有一个名为 Page_IsValid 的全局变量。每当验证失败时，该变量都会设置为 false。

编辑：WebUIValidation.js 脚本参考早于 .net 2.0，因此您无法再查看该文件。但是，Page_IsValid 变量仍然存在，可以通过挂钩到表单提交处理程序来使用。像这样的

// verified that this works
$(document).ready(function() {
    $('#form1').bind('submit', function(e) {
        if (!Page_IsValid)
            $('#yourDiv').addClass('error');
    });
});