jQuery Validation - Utilisation de plusieurs errorLabelContainer

Question

J'ai un formulaire avec quatre fieldsets différents. Pour la validation jQuery, je voudrais que les erreurs des entrées de chacun des fieldsets soient placées dans un bloc d'erreur en haut du fieldset spécifique. Par exemple:

<fieldset id="contact"> 
    <legend>Contact Information</fieldset> 
    <ul id="errors_contact" class="messages"></ul> 
    <!-- input elements --> 
</fieldset> 

<fieldset id="financial"> 
    <legend>Financial Information</legend> 
    <ul id="errors_financial" class="messages"></ul> 
    <!-- input elements --> 
</fieldset> 

Cela peut-il être effectué avec la validation jQuery?

Answer 1

Il ne peut pas en utilisant errorLabelContainer spécifiquement, il y a un paramètre/magasin pour errorLabelContainer dans le code, mais vous pouvez utiliser the errorPlacement and wrapper options l'effet que vous voulez, par exemple:

$("form").validate({ 
    wrapper: "li", 
    errorPlacement: function(label, elem) { 
    elem.closest("fieldset").find(".messages").append(label); 
    } 
}); 

Au lieu de la norme .insertAfter() (normalement placer le <label> après l'élément qu'il va avec), cela l'enveloppe dans un <li></li> et l'ajoute au conteneur .messages pour le <fieldset> actuel.

Answer 2

je l'ai fait de cette façon:

j'avais une forme qui devait valider plusieurs contrôles - mais je voulais une zone d'erreur - et un message pour tous - une ligne.

Par défaut, si vous utilisez errorLabelContainer, les validations sont ajoutées en tant que «add-ons», c'est-à-dire que plusieurs validations créent plusieurs lignes dans l'étiquette d'erreur. J'ai remarqué une chose: si la hauteur du conteneur d'étiquettes était inférieure à 30px, il a fait une nouvelle ligne vide une deuxième fois. Je ne sais pas pourquoi.

Dans mon cas, c'est une étiquette - mais elle peut aussi être une div, bien sûr. Dans mon code HTML je (en supposant que vous avez les validation.js jQuery et la base):

Myform est le nom de la forme - puis les différents contrôles HTML - tout type - par exemple:

INPUT id=theNameofcontrol type=checkbox name=theNameofcontrol validate=required:true

Ensuite, le conteneur pour le message d'erreur (ne sais pas comment faire ressembler HTML :)

label id=errorlabel name=errorlabel style=font-size:1.3em;height:30;color:red; /label

Dans ma fonction onclick pour la forme, je mets des messages vides comme errormessages et mettre un message si le formulaire n'était pas valide et renvoyer false si ce n'est pas le cas (donc je ne l'ai pas posté.)

Bien sûr, vous pouvez simplement remplir tous les messages personnalisés - mais je voulais avoir une ligne indépendamment du nombre d'erreurs.

$("#MyForm").validate(<br> 
{<br> 
errorLabelContainer:"#errorlabel",<br> 
messages : <br> 
    {theNameofcontrol: {required: "" },<br> 
    theNameofcontrol2: {required: "" },<br> 
    theNameofcontrol3: {required: "" }<br> 
    } <br> 
);<br> 
<br> 
if(! $("#MyForm").valid())<br> 
{<br> 
$("#errorlabel").html("My message when not all contols are valid!");<br> 
return false;<br> 
} 

Espérons que cela vous soit utile. Vous devriez être capable de faire la même chose pour le fieldset si vous avez un container pour tous les "objets" du groupe.

Pour valider une commande que vous utilisez:

$("#MyForm").validate({errorLabelContainer:"#errorlabel",messages :{theNameofcontrol: {required: "This has to have a value" }}}).element("#theNameofcontrol"); 

Bonne chance