Jquery在添加的標籤（JSP）上驗證類「錯誤」

我有一個Jquery Validate的小問題：我的表單是在JSP中聲明的，我使用「Jquery Validate」來驗證表單中的字段。在這裏，我們有第一和第二輸入（名字，第二個名字）：Jquery在添加的標籤（JSP）上驗證類「錯誤」

  <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驗證 - 郵件 - 僅適用於第一個變量：「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標記=數據所需-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>

標籤=標題這裏

任何想法？

來源

2017-07-26 Michel Chance

謝謝你，我沒看到了「prenom」「必需的」，但它仍然沒有工作。如果我提供prenom：{required：MessageRequired_Nom}它可以工作，但是是錯誤的信息（對於法語中的Nom - name） –

它非常冗長。請參閱我的答案，瞭解如何使其簡潔。 – Sparky

嘗試指定要從中檢索數據屬性的輸入。

因此，而不是：

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

使用：

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

來源

2017-07-26 17:25:41

非常感謝你 –

$('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/

來源

2017-07-26 17:32:46 Sparky

非常感謝 –

Jquery在添加的標籤（JSP）上驗證類「錯誤」

回答

相關問題