web-dev-qa-db-fra.com

Emplacement personnalisé des étiquettes d'erreur à l'aide de jQuery validate (Pour tout ou partie des erreurs)

Je souhaite placer une étiquette d'erreur (Not All) dans un emplacement personnalisé. jQuery fournit cette http://docs.jquery.com/Plugins/Validation/validate#toptions option mais je n'ai rien trouvé sur la façon de placer un message d'erreur spécifique et de ne pas changer l'emplacement par défaut de tout le reste?

Assurez-vous de vérifier toutes les réponses ci-dessous. Il y a plusieurs solutions à cela. Merci a tous!

jqueryjquery-validatevalidation
40
chainwork

Donc, si vous voulez que tous vos messages d'erreur jQuery Validate apparaissent au même endroit, utilisez l'option http://docs.jquery.com/Plugins/Validation/validate#toptions (Find errorPlacement) sur cette page .

J'ai remarqué quelques réponses ici répondre à une réponse, mais pas les deux options.

1) .__ Cela étant dit, si vous voulez un placement personnalisé pour toutes vos erreurs, vous pouvez le faire:

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo('#errordiv');
   }
});

2) .__ Si vous souhaitez spécifier des emplacements spécifiques pour un ou plusieurs libellés d'erreur, vous pouvez le faire.

errorPlacement: function(error, element) {
    if (element.attr("name") == "email" )
        error.insertAfter(".some-class");
    else if  (element.attr("name") == "phone" )
        error.insertAfter(".some-other-class");
    else
        error.insertAfter(element);
}
70
chainwork

En fait, il n'est pas nécessaire d'utiliser un code javascript pour cela, et j'ai découvert une solution simple. Vous pouvez forcer JQuery Validate à placer l'erreur de validation dans un élément DOM.

Par exemple, JQuery génère une erreur comme celle-ci:

 <label for="firstname" generated="true" class="error">This field required.</label>

Vous pouvez placer cet élément dom dom dans votre prochain bloc td, votre élément li ou tout autre élément de votre choix.

<label for="firstname" generated="true" class="error"></label>

JQuery trouvera ce champ vide et placera le message d'erreur à votre place.

N'oubliez pas le champ pour dans l'élément label!

38
Abdurrahman I.

Il s'agit d'une solution plus générique, non spécifique à la structure HTML du PO. 

Si vous ne voulez qu'une étiquette d'erreur particulière à un emplacement différent, les autres restent dans leur emplacement par défaut, essayez ceci ...

$("#myform").validate({
  errorPlacement: function(error, element) {
     if (element.attr("name") == "myFieldName") {

       // do whatever you need to place label where you want

         // an example
         error.insertBefore( $("#someOtherPlace") );

         // just another example
         $("#yetAnotherPlace").html( error );  

     } else {

         // the default error placement for the rest
         error.insertAfter(element);

     }
   }
});

Documentation en ligne pour l'option errorPlacement:

15
Sparky

J'ai constaté que si vous avez plus de deux étiquettes pour des erreurs personnalisées dans différents emplacements, il peut y avoir une erreur de position folle si vous ne faites ni un seul retour sur chacun des si pour errorPlacement, dans cet exemple, j'ai deux cases à cocher, une étiquette d'erreur case à cocher, une étiquette

Code HTML

<p><label for="owner"><input  type="checkbox" name="option[]" id="owner" value="1"  validate="required:true, minlength:2" /> I am Owner of my Company</label></p>
<p><label for="agency"><input  type="checkbox" name="option[]" id="agency" value="1" /> I am an Agency</label>
<div id="errordiv"></div></p>
<hr>
<p><label for="agree"><input type="checkbox" name="agree" id="agree" value="1" required /> I Agree and I read the Privacy Polities and Use of Terms</label>
<div id="error_agree"></div>

Scénario 

<script>
        $("#register_form").validate({ 
                        errorPlacement: function(error, element) {
                            if(element.attr("name") == "option[]"){
                                error.appendTo('#errordiv');
                                return;
                            }

                            if(element.attr("name") == "agree"){
                                    error.appendTo('#error_agree');
                                    return;
                            }else {
                                error.insertAfter(element);
                            }
                       }
                    });

        </script>
0
XMaster