jQuery validation dynamique

Question

Salut là-bas Im essayant de faire quelques choses avec le plugin de validation jQuery et semble coincé sur un seul endroit.

Voici un code:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#myform').validate(); 
     $('#email').rules('add', {required: true, messages: {required: 'email is required'}}); 
     $('#phone').rules('add', {required: true, messages: {required: 'phone is required'}}); 
     $('#validate').click(function(){ 
      $('#result').text($('#myform').validate().form()); 
      return false; 
     }); 
    }); 
</script> 
<form id="myform"> 
<div>email:<input type="text" id="email" /></div> 
<div>phone:<input type="text" id="phone" /></div> 
<div id="result"></div> 

<input id="valdate" type="image" src="images/submit.png" /> 
</form> 

En conséquence, je continue à obtenir un mauvais message d'erreur. Si je clique sur soumettre le bouton «téléphone est requis» est affiché près de l'entrée e-mail et «e-mail est requis» n'est pas montré du tout.

Quel est le problème avec ce code?

Answer 1

OK Il semble que j'ai trouvé le problème.

Vous AVEZ ajouter NOM attribut à des éléments de toute façon. Dans mon exemple, si vous ajoutez des noms appropriés aux éléments d'entrée, cela fonctionnera bien.

Answer 2

L'approche suivante:

<script type="text/javascript"> 
    $(function(){ 
     $('#myform').validate({ 
      rules: { 
       phone: 'required', 
       email: 'required' 
      }, 
      messages: { 
       phone: 'phone is required', 
       email: 'email is required' 
      } 
     }); 
    }); 
</script> 

ainsi que l'ajout name attribut à chaque champ d'entrée, fonctionne parfaitement.

Answer 3

Vous pourriez envisager quelque chose comme celui-ci. C'est un peu plus clair à lire et à déboguer. Puisque vous utilisez des règles standard comme "required", vous n'avez pas besoin de spécifier un message, sauf si vous voulez quelque chose de différent. Les règles et les messages sont identifiés par le nom du champ de saisie (par exemple, courrier électronique).

L'option errorPlacement vous permet de spécifier l'emplacement des messages. Vous n'avez pas besoin d'inclure cette option; la valeur par défaut est d'ajouter le message au champ de saisie. Mais si vous avez des divs de mise en page ou besoin d'une position spéciale pour le message sur les boîtes de radio, ou ce que vous avez, c'est l'endroit pour le faire.

$(document).ready(function(){ 
    $('#myform').validate({ 
     rules:{ 
     email: "required", 
     phone: {required:true, minlength:7} 
     }, 
     messages:{ //not required as default message for "required" rule makes same text 
     email: "email is required", 
     phone: "phone is required", 
     }, 
     errorPlacement: function(error, element) { //this is where to put positioning rules 
     error.appendTo(element.parent()); //just an example 
     } 
    }); 
}); 

Answer 4

Essayez d'ajouter des règles d'abord, puis d'appeler $ ('# myform'). Valider()

Il ne fonctionnera pas. Vous devez appeler la méthode de validation en premier.

noms d'entrée en utilisant l'approche

Je sais que je peux le faire en utilisant des noms que vous avez mentionnés ci-dessus. Mais malheureusement, je vais devoir utiliser des identifiants.

le contenu ne sera pas constant. Cela variera en fonction de certaines règles. Donc, presque chaque fois que j'aurai une page différente. Il y aura beaucoup de contrôles avec des identifiants différents. beaucoup de groupes de validation etc.

Donc, en utilisant "l'approche des noms" ne répond pas à mes exigences.

Une idée de comment utiliser $ (selector) .rules ('add') approche ??

P.S. J'ai trouvé l'exemple suivant http://www.coldfusionjedi.com/index.cfm/2009/2/22/Using-jQuery-to-add-form-fields--with-validation et ça marche plutôt bien et il n'y a rien de spécial dans le code.