Jquery validate class "error" on added label (JSP)

Question

I have a little problem with Jquery Validate : My form is declared in a JSP and I use "Jquery Validate" to validate fields in the form. Here we have the first and second input (first name, second name) :

            <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 Validate code :

$(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  
                 }          

            }

   })
 });

The problem is that Jquery Validate - messages - works only for the first variable : "nom"; for all the others(prenom,email,etc) Jquery Validate creates a "label" with error class and text took from the "title" attribute of the input field and not from the declared "data-required-prenom" attribute. See below :

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

The first one is corect label = data-required-nom.

But for the second input :

<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

Any idea?

Answer 1

$('input') is too general and returns an object containing ALL input elements on the form. Then when you use the .attr() method, it will only get attached to the first matching object.

You'll need to be more specific with your jQuery selectors...

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

---

You could also use the .data() method instead, and save some bytes...

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

---

You also don't need to define all those variables. Use everything directly within the messages object...

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

Answer 2

Try specifying which input you want to retrieve the data attribute from.

So instead of:

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

Use:

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