如果使用jquery验证发生验证错误，则将类添加到父div

我的输入字段有以下标记：

姓名*
@Html.TextBoxFor（m=>m.Name）
@Html.ValidationMessageFor（m=>m.Name）

如果发生错误，使用jquery验证插件，它将在输入下面添加一个范围，并将一个类应用于输入本身，以便对错误进行样式化。我还想做的是向父div添加一个类，其中包含一个required的类。因此，例如，如果发生错误，它将是

，然后当与应用于字段的类相关的

被修复时，将删除错误范围

我该怎么做？我查看了文档站点，但没有看到任何与向父div添加类有关的内容

我一直在考虑做以下事情：

if（$（'input'）.hasClass（'valid'））{
$（this）.parents（'div.required'）.addClass（'valid'）；
}else if（$（'input'）.hasClass（'input-validation-error'））{
$（this）.parents（'div.required'）.addClass（'error'）；
}

---

但我怎样才能用验证运行它序列呢？例如当发生错误或某个字段变为有效时。

我根本没有玩过这个，但您可以使用它。

我根本没有玩过这个，但您可以使用

访问验证程序设置 第一个任务是修改表单验证程序上的

设置

对象。您可以通过以下任一方式执行此操作：

在通过调用为所有窗体加载窗体之前

通过在上传递选项初始化窗体时

初始化后，通过在表单上定位validator对象

因为您使用的是MVC，所以选项#2是不可能的，因为它将自动初始化表单。因此，让我们继续使用选项3——这里的目标只是能够自定义表单上的设置

覆盖默认行为 我们要修改的默认方法是and，它将分别突出显示无效字段或恢复突出显示选项所做的更改。以下是他们的默认行为：

突出显示：函数（元素、errorClass、validClass）{
如果（element.type==“无线电”）{
this.findByName（element.name）.addClass（errorClass）.removeClass（validClass）；
}否则{
$（元素）.addClass（错误类）.removeClass（有效类）；
}
},
取消高亮显示：函数（元素、errorClass、validClass）{
如果（element.type==“无线电”）{
this.findByName（element.name）.removeClass（errorClass）.addClass（validClass）；
}否则{
$（元素）.removeClass（错误类）.addClass（有效类）；
}
}

所以你也有一些选择

完全替换这些函数并自己编写

包装这些函数并像普通函数一样调用它们，但在之前或之后添加您自己的自定义代码 备选方案1-取代批发 这条路线很容易。你想写什么就写什么。也许是源代码的种子，也许是你自己的事情

var valSettings=$（“表单”）.data（“验证器”）.settings
valSettings.highlight=函数（元素，errorClass，validClass）{…}
valSettings.unhighlight=函数（元素，errorClass，validClass）{…}

选项2-换行功能 这是较少的干扰，所以在大多数情况下可能更可取

由于最终将替换

valSettings.highlight

的值，因此需要访问原始函数的干净原始版本。您可以保存自己的或从全局默认值中获取一个

// original highlight function
var highlightOriginal = $("form").data("validator").settings.highlight;
var highlightDefaults = $.validator.defaults.highlight

在包装JavaScript函数方面，有两个示例（和）。下面是其中一个经过解析的示例，它将有助于跨函数调用绑定

this

上下文，保留传递的参数的算术性，并保留返回值：

函数换行（函数换行，函数之前）{
返回函数（）{
var args=Array.prototype.slice.call（参数），
beforeFunction.apply（此参数为args）；
返回函数towrap.apply（此参数）；
};
};

然后，您还必须快速定义您希望在呼叫时触发的任何其他行为。在本例中，让我们找到与元素最接近的父元素

div

，并更新其类，如下所示：

function highlightDecorator(element, errorClass, validClass) {
    $(element).closest("div").addClass(errorClass).removeClass(validClass);
}

把它全部包装起来（看看我在那里做了什么）

$（函数（）{
var valSettings=$（“格式”）.数据（“验证程序”）.设置
valSettings.highlight=wrap（$.validator.defaults.highlight，highlightDecorator）
valSettings.unhighlight=wrap（$.validator.defaults.unhighlight，unhighlightDecorator）
});
函数换行（函数换行，函数之前）{
返回函数（）{
var args=Array.prototype.slice.call（参数）；
beforeFunction.apply（此参数为args）；
返回函数towrap.apply（此参数）；
};
};
函数highlightDecorator（元素、errorClass、validClass）{
$（元素）。最近的（“div”）.addClass（errorClass）。removeClass（validClass）；
}
函数unhighlightDecorator（元素、errorClass、validClass）{
$（元素）。最近的（“div”）.addClass（有效类）。removeClass（错误类）；
}

因此，当我们结合上述所有功能时，它应该是这样的：

function highlightDecorator(element, errorClass, validClass) {
    $(element).closest("div").addClass(errorClass).removeClass(validClass);
}

在堆栈片段和

$（函数（）{
var valSettings=$（“格式”）.数据（“验证程序”）.设置
valSettings.highlight=wrap（$.validator.defaults.highlight，highlightDecorator）
valSettings.unhighlight=wrap（$.validator.defaults.unhighlight，unhighlightDecorator）
});
函数换行（函数换行，函数之前）{
返回函数（）{
var args=Array.prototype.slice.call（参数）；
beforeFunction.apply（此参数为args）；
返回函数towrap.apply（此参数）；
};
};
函数highlightDecorator（元素、errorClass、validClass）{
$（元素）。最近的（“div”）.addClass（errorClass）。removeClass（validCl