Question

我对Jquery Validate有一点问题：我的表单是在JSP中声明的，我使用＆＃34; Jquery Validate＆＃34;验证表单中的字段。这里我们有第一个和第二个输入（名字，第二个名字）：

            <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 - 仅适用于第一个变量：＆＃34; nom＆＃34 ;;对于所有其他人（prenom，电子邮件等），Jquery Validate创建一个＆＃34;标签＆＃34;错误类和文本取自＆＃34;标题＆＃34;输入字段的属性，而不是声明的＆＃34;数据要求 - prenom＆＃34;属性。见下文：

<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>

label = title here

有什么想法吗？

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'), .......

您也可以使用the .data() method代替，并保存一些字节......

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');
            }
        }
    },
....

DEMO：jsfiddle.net/7j9j23kz/3/

Jquery验证类＆＃34;错误＆＃34;添加标签（JSP）

2 个答案: