在客户端验证上使用 jquery 更改关联的文本框颜色答案

【问题标题】：Change associated textbox color with jquery on client validation在客户端验证上使用 jquery 更改关联的文本框颜色
【发布时间】：2013-05-02 18:42:02
【问题描述】：

我想使用 jquery 来选择所需的关联元素的父级并更改 css 类。

我需要为必填字段的跨度的父 div 添加一个 css 类“错误”。（这将根据我的 css 为文本框着色）。

我的 aspx 页面最初生成了以下 html 标记：

<div class="control-group">
  <label>Your name</label>
  <input name="ctl00$MainContent$txtName" type="text" maxlength="100" id="MainContent_txtName">
  <span data-val-controltovalidate="MainContent_txtName" data-val-errormessage="Your name is required" data-val-display="Dynamic" id="MainContent_txtNameRequired" class="error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="display:none;">This field is required</span>
</div>

在“客户端验证”之后，span 变为：

<span data-val-controltovalidate="MainContent_txtName" data-val-errormessage="Your name is required" data-val-display="Dynamic" id="MainContent_txtNameRequired" class="error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="display: inline;">This field is required</span>

在服务器回发之后，跨度实际上是：

<span data-val-controltovalidate="MainContent_txtName" data-val-errormessage="Your name is required" data-val-display="Dynamic" data-val-isvalid="False" id="MainContent_txtNameRequired" class="error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="">This field is required</span>

我想使用一个 javascript 函数，它不需要在要使用它的每个按钮上都有 onclick 函数。我想在许多页面上重复使用相同的功能。

【问题讨论】：

标签： jquery asp.net validation

【解决方案1】：

虽然我无法根据跨度和数据元素找到具体的答案，但大约一个小时后，我发现了另一个帮助我想出这个解决方案的问题：

<script type="text/javascript">
    $(document).ready(function () {
        $("form").submit(function () {
            if (typeof Page_Validators != 'undefined') {
                var errors = '';
                $.each(Page_Validators, function () {
                    if (!this.isvalid) {
                        $(this).parent().addClass("error");
                    }
                });
            }
        });
    });
</script>

链接：Validation event for asp net client side validation

【讨论】：