2

在此处查看实际问题：（感谢任何可以提供帮助的人！）

http://jsfiddle.net/74u7g/

  • 当密码匹配时，我通过添加类 checkMark 添加绿色复选标记
  • 要查看问题，请更改第二个密码，使其不匹配且少于 6 个字符。
  • 我只想删除此特定输入的类（第二个密码字段）

class如果用户稍后更改其条目（成功后）导致错误，则所需文本保持绿色（未删除）。如何成功删除class checkMark错误？

$("#registerForm").validate({       
    rules: {
    createUsername: {
    required: true,
    email: true
},

    createPassword: {
    required: true,
    minlength: 6
    },

    createPassword2: {
    equalTo: "#createPassword",
    minlength: 6
    }
},

messages: {
    createPassword: {
    required: "This field is required.",
    minlength: "Password must be 6-15 characters long."
    }
},

success: function(label) {
    if ( $(label).parent().is('#confirmPassContainer') ) {
        $(label).addClass('checkMark').html('✓'); 
        }   
    }

});

我试过highlightanderror方法没有成功。我在 StackOverflow 上搜索了很多答案，但还没有运气。希望使用jQuery的解决方案。

4

2 回答 2

2

highlight:在您的内部使用.validate()...

highlight: function (element, errorClass) {
    $(element).siblings('label').removeClass('checkMark');
}

我相信每次表单测试无效时它都会触发......有点与success:.

在您的演示中：

http://jsfiddle.net/74u7g/5/

编辑：

element指正在input验证的特定元素。

errorClass指class插件用来标记错误的。本例中未使用。

所以$(element)选择有错误的元素，然后.siblings('label')只选择作为元素的兄弟姐妹<label>，然后.removeClass('checkMark')删除你的checkMark class.

$(element).siblings('label').removeClass('checkMark');

编辑2：

您可能想要添加一个条件来测试它是否在相关的输入元素上，尽管我确信让它在所有元素上运行肯定不会有什么坏处。

见：http: //jsfiddle.net/74u7g/6/

if ( $(element).parent().is('#confirmPassContainer') ) {
    $(element).siblings('label').removeClass('checkMark');
}
于 2012-10-16T23:25:24.490 回答
1

您可以通过使用 CSS 优先级来解决问题。

.regForms .error {
    display:block;
    color:#c92a00 !important;
    font-size:12px;
}

在您的情况下，当第二个密码与第一个密码不同时，您同时有 2 个 CSS 规则和 2 个颜色定义。!important 允许您优先处理错误之一。

于 2012-10-16T22:29:26.803 回答