web-dev-qa-db-fra.com

Placement d'erreur personnalisé du plug-in Jquery Validation

Utilisation du plug-in jQuery Validation pour le formulaire suivant:

<form id="information" method="post" action="#">

            <fieldset>
                <legend>Please enter your contact details</legend>
                <span id="invalid-name"></span>
                <div id="id">
                    <label for="name">Name: (*)</label>
                    <input type="text" id="name" class="details" name="name" maxlength="50" />
                </div>

                <span id="invalid-email"></span>
                <div id="id">
                    <label for="email">Email: (*)</label>
                    <input type="text" id="email" class="details" name="email" maxlength="50" />
                </div>
            </fieldset>
            <fieldset>
                <legend>Write your question here (*)</legend>
                <span id="invalid-text"></span>
                <textarea  id="text" name="text" rows="8" cols="8"></textarea>


            <div id="submission">
                <input type="submit" id="submit" value="Send" name="send"/>
            </div>
            <p class="required">(*) Required</p>
            </fieldset>

             </form>

Comment puis-je placer les erreurs à l'intérieur des balises span? (# nom-invalide, # email-invalide, # texte invalide)

J'ai lu la documentation sur le placement des erreurs mais je n'ai pas compris comment cela fonctionne. Est-il possible de gérer chaque erreur unique et de la placer dans l'élément spécifié?

Je vous remercie

jquery-validate
27
Mirko

Il s'agit d'une structure de base, vous pouvez utiliser le sélecteur que vous souhaitez dans la méthode. Vous avez l'élément d'erreur et l'élément qui n'était pas valide.

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.prev());
    }
});

Ou pour cibler l'ID, vous pouvez le faire

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo('#invalid-' + element.attr('id'));
    }
});

Non testé, mais devrait fonctionner.

34
Dustin Laine

Vous pouvez également ajouter manuellement des étiquettes d'erreur aux endroits où vous en avez besoin. Dans mon cas particulier, j'avais un formulaire plus complexe avec des listes de cases à cocher, etc. où un insert ou un insert après romprait la mise en page. Plutôt que de faire cela, vous pouvez profiter du fait que le script de validation évaluera s'il existe une balise d'étiquette existante pour le champ spécifié et l'utilisera.

Considérer:

<div id="id">
    <label for="name">Name: (*)</label>
    <input type="text" id="name" class="details" name="name" maxlength="50" />
</div>

Ajoutez maintenant la ligne suivante:

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

qui est une étiquette d'erreur standard:

<div id="id">
    <label for="name">Name: (*)</label>
    <input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
<div id="id-error">
    <label for="name" class="error" generated="true"></label>
<div>

jQuery utilisera cette étiquette plutôt que d'en générer une nouvelle. Désolé, je n'ai pas pu trouver de documentation officielle à ce sujet, mais j'ai trouvé d'autres messages qui sont tombés sur ce comportement.

52
Stefan Morrow

J'ai trouvé que l'utilisation de .insertAfter plutôt que de .appendTo fonctionne:

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.insertAfter('#invalid-' + element.attr('id'));
    }
});
3
user383864

J'utilise l'extension de métadonnées avec le validateur .. (remarque, je le configure pour utiliser l'attribut data-meta sur le balisage ...)

<input ... data=meta='{
    errorLabel: "#someotherid"
    ,validate: {
        name:true
    }
}' >

puis en code ...

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo($(
            $(element).metadata().errorLabel
        ));
    }
});

J'ai utilisé les métadonnées pour de nombreuses fonctionnalités similaires, ce qui fonctionne plutôt bien ... remarque, j'ai utilisé les tics simples (apostrophes) autour des métadonnées, de cette façon, vous pouvez utiliser un sérialiseur JSON côté serveur pour injecter dans cette partie de la balise (qui devrait utiliser des guillemets autour des chaînes) ... un apos littéral peut être un problème cependant, (remplacez "'" par "\ x27" dans la chaîne).

0
Tracker1