jquery errorPlacement

Question

Je donne les résultats suivants:

$("#pmtForm").validate({ 
      rules: { 
        acct_name: "required",       
        acct_type: "required", 
        acct_routing: { 
            required: true,  
            digits: true, 
            exactLength:9 
            }, 
        acct_num:  { 
            required: true,  
            digits: true 
            }, 
        c_acct_routing:{ 
            equalTo: '#acct_routing' 
            },  
        c_acct_num: { 
            equalTo: '#acct_routing' 
            }  
      }, 
      messages: { 
        acct_name: "<li>Please enter an account name.</li>", 
        acct_type: "<li>Please choose an account type.</li>", 
        acct_routing: "<li>Please enter a routing number.</li>", 
        acct_num: "<li>Please enter an account number.</li>", 
        c_acct_routing: "<li>Please confirm the routing number.</li>", 
        c_acct_num: "<li>Please confirm the account number.</li>" 
      }, 

     // errorContainer: '#div.error', 

      errorPlacement: function(error, element) { 
       $('#errorList').html(""); 
       $('#errorList').append(error); 
       $('div.error').attr("style","display:block;"); 
      } 
     }); 

Je suis en train d'insérer les messages d'erreur à un div dessus du formulaire. Mon problème est si je supprime cette ligne: $ ('# errorList'). Html (""); puis il affiche les messages d'erreur correctement la première fois. Si j'appuie une nouvelle fois sur le bouton Soumettre, un autre ensemble de messages sera ajouté à la div. Si je garde $ ('# errorList'). Html (""); alors je n'aurai qu'un seul message d'erreur.

Veuillez entrer un numéro de compte. Comment puis-je actualiser errorList pour qu'il ne se répète pas et affiche les messages d'erreur correctement?

merci d'avance.

Answer 1

cela fonctionne:

$("#addPmtAcctForm").validate({ 
      rules: { 
        acct_name: "required",       
        acct_type: "required", 
        acct_routing: { 
            required: true,  
            digits: true, 
            exactLength:9 
            }, 
        acct_num:  { 
            required: true,  
            digits: true 
            }, 
        c_acct_routing:{ 
            equalTo: '#acct_routing' 
            },  
        c_acct_num: { 
            equalTo: '#acct_num' 
            }  
      }, 
      messages: { 
        acct_name: "<li>Please enter an account name.</li>", 
        acct_type: "<li>Please choose an account type.</li>", 
        acct_routing: "<li>Please enter a routing number.</li>", 
        acct_num: "<li>Please enter an account number.</li>", 
        c_acct_routing: "<li>Please confirm the routing number.</li>", 
        c_acct_num: "<li>Please confirm the account number.</li>" 
      }, 

      errorLabelContainer: $("ul", $('div.error')), wrapper: 'li', 

      errorContainer: $('div.error'), 

      errorPlacement: function(error, element) { 
       $('#errorList').append(error); 
      } 
     }); 

Answer 2

Je pense que ce que vous êtes après est le plus approprié errorContainer, errorLabelContainer and wrapper options, comme ceci:

$("#pmtForm").validate({ 
     rules: { ... }, 
     messages: { ... }, 
     errorContainer: '#errorList', 
     errorLabelContainer: "#errorList ul", 
     wrapper: 'li' 
}); 

Vous pouvez maintenant retirer l'emballage <li></li> de vos messages d'erreur, cela va les envelopper, placez ensuite dans le <div id="#errorList"><ul></ul></div>, et cachez le <div> lorsqu'il n'y a pas d'erreur :)

Answer 3

j La validation par QRQuery contrôle pour vous l'état des messages d'erreur. Autrement dit, vous ne devriez pas avoir à utiliser:

$('#errorList').html(""); 

pour contrôler l'état de votre conteneur d'erreur. Dans ce cas, vous devriez être OK pour utiliser:

errorContainer: '#div.error' 

errorPlacement est plus destiné à vous permettre d'ajouter le message d'erreur dans un récipient très spécifique (par exemple: le dernier TD dans un TR qui est réservé aux messages d'erreur). Si vous utilisez des outils similaires à FireBug, vous verrez que jQuery Validation ajoutera le message d'erreur à votre conteneur d'erreur et contrôlera sa visibilité selon que l'élément d'un formulaire transmet ses règles.

En outre, vous ne devriez pas besoin d'envelopper vos messages d'erreur dans HTML, vous pouvez utiliser:

wrapper: "li" 

Answer 4

Je pense que vous avez juste besoin d'ajouter ceci à votre méthode validate errorContainer: errorList errorLabelContainer: $("ol", container), wrapper: 'li',

try et voir ...