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更改 - 例如，每当添加span时触发事件处理程序<div class="formLine">的孩子？

还有其他人对此有什么好的建议吗？

感谢阅读。

Answer 1

编辑：澄清后

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

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

Further info on MSDN.

您需要使用id标记将div声明为runat =“server”，以便在服务器端代码中引用它，然后在页面加载中对Page.IsValid进行测试，如果您的某个验证器未能通过，则返回false vaildate。

然后，您可以以编程方式在div上设置class属性。类似的东西：

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

Code-Behind（VB）

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

Answer 2

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

当您在webform上使用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');
    });
});

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

2 个答案: