在validate上将链接标签设置为错误类,不要添加额外标签

时间:2014-04-14 21:05:45

标签: jquery-validate

我没有添加带有class =“error”的标签,而是想将.error添加到我已经拥有的标签中:

我有这个:

<label class="requiredlabel" for="email_address">Your Email</label>
<input name="email_address" id="email_address" value="" class="text email required" type="text">

我只是希望<label>在错误的验证中获得类.error。 目前,该插件附加了:

<label class="error" for="email_address">This field is required.</label>

我宁愿不加标签。

当然,我希望它对电子邮件有例如.error。无效。

2 个答案:

答案 0 :(得分:1)

引用OP

  

“我不想在label添加class="error",而是将.error添加到我已经拥有的label中...我只是想要<label>在错误验证时获得课程.error。“

使用以下回调函数来覆盖默认值...

$('#myform').validate({
    // your other options, rules, etc,
    errorPlacement: function() {
        return false; // suppress the default error messages
    },
    highlight: function (element) {
        // on error add the error class to your label
        $(element).prev('label').addClass('error');  
    },
    unhighlight: function (element) {
        // on validation remove the error class from your label
        $(element).prev('label').removeClass('error');
    }
});

  

“当然,我希望它有例如.error。无效的电子邮件。”

引用OP评论

  

“我的意思是,当用户输入错误的电子邮件地址时,我希望我的标签有class =”错误无效“(显然只对于电子邮件输入)。而且只是'错误',在需要时却丢失了我目前只检查我的元素是否为“必需”和“电子邮件”(如适用)。“

这是不可能的。该插件只是评估规则,并在没有错误时发出相应的错误消息以及错误class或有效class。无法为每个规则指定不同的错误class

答案 1 :(得分:1)

这是我想出来的,使用Sparky的答案:

jQuery.validator.setDefaults({
errorPlacement: function() { return false;  },
highlight: function (element) {
    jQuery(element).addClass('error');
    jQuery(element).siblings( 'label' ).addClass('error'); // on error add the error class to your label 
}
,unhighlight: function (element) {
    jQuery(element).removeClass('error');
    jQuery(element).siblings( 'label' ).removeClass('error invalid'); // on validation remove the error class from your label
}
});

我使用兄弟姐妹(),因为我的标签和输入之间有一个<br>(因此prev()不起作用)。这是有效的,因为我的标签和输入都包含在div中(不会有无意中将类添加到另一个标签的危险)

然后:

jQuery.validator.addMethod("email", function(value, element) {
valid = this.optional(element) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value);
if(!valid)
    jQuery(element).siblings( 'label' ).addClass('error invalid');
return valid;
},jQuery.validator.format("This part doesnt work, but i dont care") );

我刚刚复制了原始验证方法,添加了我的课程