Jquery 验证添加标签上的类"error" (JSP)

Question

我对Jquery Valid有一点问题：我的表单是在JSP中声明的，我使用"Jquery Validate"来验证表单中的字段。 这里我们有第一个和第二个输入(名字，第二个名字(：

<div class="medium-6 columns">
<input type="text"     
class="input_text" 
id="nom"          
name="nom"          
title="<fmt:message key="main_new_acc_form_p_nom" />"    
placeholder="<fmt:message key="main_new_acc_form_p_nom" />"
data-required-nom="<fmt:message key="main_new_acc_form_e_nom" />"
data-minlength-nom="<fmt:message key="main_new_acc_form_p_min_n" />" 
/>
</div>
<div class="medium-6 columns">
<input type="text"     
class="input_text" 
id="prenom"       
name="prenom"       
title="<fmt:message key="main_new_acc_form_p_prenom" />" 
placeholder="<fmt:message key="main_new_acc_form_p_prenom" />"
data-required-prenom="<fmt:message key="main_new_acc_form_e_prenom" />"
/>
</div>

Jquery 验证代码：

$(document).ready(function(){
var MessageRequired_Nom              = $('input').attr('data-required-nom');
var MessageMinlength_Nom             = $('input').attr('data-minlength-nom');
var MessageRequired_Prenom           = $('input').attr('data-required-prenom');
var MessageRequired_Email            = $('input').attr('data-required-email');
var MessageValidate_Email            = $('input').attr('data-validate-email');
var MessageRequired_Email_c          = $('input').attr('data-required-email_c');
var MessageEqualTo_Email_c           = $('input').attr('data-equalTo-email_c');
var MessageRequired_MotdePasse       = $('input').attr('data-required-motdepasse');
var MessageStrongPassword_MotdePasse = $('input').attr('data-strongPassword-motdepasse');
var MessageRequired_MotdePasse_c     = $('input').attr('data-required-motdepasse_c');
var MessageEqualTo_MotdePasse_c      = $('input').attr('data-equalTo-motdepasse_c');
$("#form_new").validate({
rules : {
nom : {
required : true,
minlength : 3
}, 
prenom : {required:true},
email : {
required : true,
email : true
},
email_c : {
required : true,
equalTo : "#email"
},
motdepasse : {
required : true,
strongPassword : true
},
motdepasse_c : {
required : true,
equalTo : "#motdepasse"
}
},
messages : {
nom : {
required : MessageRequired_Nom,
minlength : MessageMinlength_Nom 
},
prenom : MessageRequired_Prenom,
email : {
required : MessageRequired_Email,
email : MessageValidate_Email 
},
email_c : {
required : MessageRequired_Email_c,
equalTo : MessageEqualTo_Email_c
},
motdepasse : {
required : MessageRequired_MotdePasse,
strongPassword : MessageStrongPassword_MotdePasse 
},
motdepasse_c : {
required : MessageRequired_MotdePasse_c,
equalTo : MessageEqualTo_MotdePasse_c  
}          
}
})
});

问题是Jquery Validate - messages - 仅适用于第一个变量："nom";对于所有其他变量(prenom，电子邮件等(，Jquery Validate 创建了一个"标签"，其错误类和文本取自输入字段的"title"属性，而不是声明的"data-required-prenom"属性。 见下文 ：

<div class="medium-6 columns">
<input type="text" 
class="input_text error" 
id="nom" name="nom" 
title="Nom" placeholder="Nom" 
data-required-nom="Veuillez remplir le champ Nom" 
data-minlength-nom="Le Nom doit contenir au moins 3 caractères" 
aria-required="true" aria-invalid="true">
<label id="nom-error" class="error" for="nom">Veuillez remplir le champ Nom</label>
</div>

第一个是 corect label = data-required-nom。

但是对于第二个输入：

<div class="medium-6 columns">
<input type="text" 
class="input_text error" 
id="prenom" name="prenom" 
title="Prénom" 
placeholder="Prénom" 
data-required-prenom="Veuillez remplir le champ Prénom" 
aria-required="true">
<label id="prenom-error" class="error" for="prenom">Prénom</label>
</div>

标签 = 此处的标题

知道吗？

Answer 1

尝试指定要从哪个输入中检索数据属性。

所以代替：

$('input').attr('data-required-prenom');

用：

$('#prenom').attr('data-required-prenom');

Answer 2

$('input')太笼统，返回一个包含表单上所有input元素的对象。 然后，当您使用.attr()方法时，它只会附加到第一个匹配的对象。

你需要更具体地使用你的jQuery选择器...

var MessageRequired_Nom      = $('#nom').attr('data-required-nom'),
MessageMinlength_Nom     = $('#nom').attr('data-minlength-nom'),
MessageRequired_Prenom   = $('#prenom').attr('data-required-prenom'), .......

---

您也可以改用.data()方法，并节省一些字节...

var MessageRequired_Nom      = $('#nom').data('required-nom'),
MessageMinlength_Nom     = $('#nom').data('minlength-nom'),
MessageRequired_Prenom   = $('#prenom').data('required-prenom'), .......

---

您也不需要定义所有这些变量。 直接在messages对象中使用所有内容...

....
messages: {
first: {
required: function() {
return $('[name="first"]').data('required-first');
},
minlength: function() {
return $('[name="first"]').data('minlength-first');
}
},
last: {
required: function() {
return $('[name="last"]').data('required-last');
}
}
},
....

演示：jsfiddle.net/7j9j23kz/3/