jquery表单验证-父容器的错误类答案

【问题标题】：jquery form validation - error class to parent containerjquery表单验证-父容器的错误类
【发布时间】：2011-09-25 18:18:19
【问题描述】：

我正在使用 Jörn 的 jQuery 验证 - 您可以查看 downloading it here 的完整代码。

我遇到了一些问题，因为我对 Javascript 并不完全熟悉。

这是我的 HTML 示例

<div class="field">
    <label for="myInput">My Input</label>
    <input id="myInput" name="myInput" type="text" />

    <span class="helptext">
        This is some help text for My Input...
    </span>
</div>

基本上，上面的 HTML 对表单的每个“部分”都是重复的。 .helptext 通过 CSS 隐藏，除非父 div 有一个 .error 类。

例如： <div class="field error">

这是我认为是验证插件的相关代码 - 如何将错误类添加到父级 div.field？

defaults: {
    messages: {},
    groups: {},
    rules: {},
    errorClass: "error",
    validClass: "valid",
    errorElement: "span.helptext",
    focusInvalid: true,
    errorContainer: $( ["div.field"] ),
    errorLabelContainer: $( [] ),
    onsubmit: true,
    ignore: [],
    ignoreTitle: false,
    ...

【问题讨论】：

标签： jquery forms validation jquery-validate

【解决方案1】：

您可以使用突出显示/取消突出显示处理程序来添加/删除类，如下所示：

highlight: function(element, errorClass, validClass) {

    $(element).parent('.field').addClass(errorClass).removeClass(validClass);

},

unhighlight: function(element, errorClass, validClass) {

    $(element).parent('.field').removeClass(errorClass).addClass(validClass);

}

希望这会有所帮助，d。

【讨论】：