À l'aide dépend avec le plugin jQuery Validation

J'ai un formulaire avec un tas de zones de texte qui sont désactivées par défaut, puis activée par l'utilisation d'une case à cocher en regard de chacun d'eux.

Lorsque cette option est activée, les valeurs de ces zones de texte sont nécessaires pour être un nombre valide, mais lorsqu'il est désactivé, ils n'ont pas besoin d'une valeur (évidemment). J'utilise le plugin jQuery Validation de faire cette validation, mais il ne semble pas être en train de faire ce que j'attends.

Lorsque je clique sur la case pour désactiver la zone de texte, j'obtiens toujours le champ non valide erreur en dépit de la depends clause j'ai ajouté les règles (voir code ci-dessous). Curieusement, ce qui se passe réellement est que le message d'erreur s'affiche pendant une fraction de seconde puis s'en va.

Voici un échantillon de la liste de cases à cocher & zones de texte:

<ul id="ItemList">
<li>
    <label for="OneSelected">One</label><input id="OneSelected" name="OneSelected" type="checkbox" value="true" />
    <input name="OneSelected" type="hidden" value="false" />
    <input disabled="disabled" id="OneValue" name="OneValue" type="text" />
</li>
<li>
    <label for="TwoSelected">Two</label><input id="TwoSelected" name="TwoSelected" type="checkbox" value="true" />
    <input name="TwoSelected" type="hidden" value="false" />
    <input disabled="disabled" id="TwoValue" name="TwoValue" type="text" />
</li>
</ul>

Et voici le code jQuery que j'utilise

//Wire up the click event on the checkbox
jQuery('#ItemList :checkbox').click(function(event) {
    var textBox = jQuery(this).siblings(':text');
    textBox.valid();
    if (!jQuery(this).attr("checked")) {
        textBox.attr('disabled', 'disabled');
        textBox.val('');
    } else {
        textBox.removeAttr('disabled');
        textBox[0].focus();
    }
});

//Add the rules to each textbox
jQuery('#ItemList :text').each(function(e) {
    jQuery(this).rules('add', {
        required: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        },
        number: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        }
    });
});

Ignorer le champ caché dans chaque li il est là parce que je suis en utilisant asp.net MVC est Html.Checkbox méthode.

Je suis commentant, au lieu de répondre parce que je n'ai jamais utilisé le plugin de validation. Avez-vous essayé de mettre de zone de texte.valider() dans la vrai partie de l'instruction if qui vérifie une case est cochée?
Malheureusement, ce n'est pas l'

OriginalL'auteur Glenn Slaven | 2008-12-19

  1. 11

    À l'aide de l'option "ignorer" ( http://docs.jquery.com/Plugins/Validation/validate#toptions ) pourrait être le moyen le plus facile pour vous de traiter avec cela. Dépend de ce que vous avez sur le formulaire. Par exemple, vous ne voudriez pas de filtre sur les éléments désactivés si vous avez eu d'autres contrôles qui ont été désactivées, mais vous avez encore besoin de valider pour une raison quelconque. Toutefois, si cette voie ne fonctionne pas, à l'aide d'une classe supplémentaire à filtrer (ajout et la suppression avec vos cases à cocher) devrait vous obtenez à l'endroit où vous voulez aller, mais plus facile.

    I. e. 

            $('form').validate({
            ignore: ":disabled",
            ...
        });
    Agréable et simple - ce résolu pour moi. Merci!
    ne fonctionne pas pour moi.
    vous aurez envie de vérifier que le sélecteur est correct. Bien sûr, "désactivé" indique que tous les sélecteurs doit être ignorée. Sinon, ignorer: ".ignoreMe" va ignorer tous les éléments avec la classe de "ignoreMe".

    OriginalL'auteur Ted

  2. 4

    Généralement ce faisant, j'ai sauter 'dépend' et il suffit d'utiliser la required jQuery Valider la règle et le laisser gérer la vérification basée sur le sélecteur de donnée, par opposition à l'éclatement de la logique entre le fait de valider les règles et la case à cocher gestionnaire de clic. J'ai mis en place un démonstration rapide de comment je peux faire cela, à l'aide de votre balise.

    Vraiment, ça se résume à required:'#OneSelected:checked'. Cela rend le champ en question exige seulement si l'expression est vraie. Dans la démo, si vous soumettez la page tout de suite, ça fonctionne, mais comme tu le cases à cocher, la forme n'est pas en mesure de soumettre jusqu'à ce que les champs cochés sont remplis d'une entrée. Vous pouvez toujours mettre un .valid() appel dans la case, cliquez sur gestionnaire si vous voulez l'intégralité du formulaire pour valider cliquez sur.

    (Aussi, je l'ai raccourci de votre case basculer un peu, ce qui rend l'utilisation de jQuery est merveilleux de chaînage fonction, bien que votre "mise en cache" à textBox est tout aussi efficace.)

    +1 pour la solution élégante, un problème avec elle: si vous décochez une case après avoir tenté de soumettre le message d'erreur ne disparaît pas. résolu en supprimant le message d'erreur lors de la désactivation du champ, écrit-il dans une autre réponse, car la mise en forme dans les commentaires c'est de la merde

    OriginalL'auteur Collin Allen

  3. 2

    Dépend du paramètre ne fonctionne pas correctement, je suppose que la documentation est à jour.
    J'ai réussi à le faire fonctionner comme ceci:

    required : function(){ return $("#register").hasClass("open")}

    OriginalL'auteur Jacek

  4. 1

    Suivant @Collin Allen réponse:

    Le problème est que si vous désactivez une case à cocher quand c'est message d'erreur est visible, le message d'erreur ne disparaît pas.

    J'ai résolu en supprimant le message d'erreur lors de la désactivation du champ.

    Prendre Collin de démonstration et d'apporter les modifications suivantes à l'activation/désactivation de processus:

    jQuery('#ItemList :checkbox').click(function()
{
    var jqTxb = $(this).siblings(':text')
    if ($(this).attr('checked'))
    {       
        jqTxb.removeAttr('disabled').focus();
    }
    else
    {
        jqTxb.attr('disabled', 'disabled').val('');
        var obj = getErrorMsgObj(jqTxb, "");
        jqTxb.closest("form").validate().showErrors(obj);
    }
});
function getErrorMsgObj(jqField, msg)
{
    var obj = {};
    var nameOfField = jqField.attr("name");
    obj[nameOfField] = msg;
    return obj;
}

    Vous pouvez le voir j'ai les tripes supprimer le message d'erreur à partir du champ lors de la désactivation, il

    Et si vous vous faites du souci à propos de $("form").validate(), Ne pas!
    Il n'a pas de revalider la forme qu'il renvoie simplement l'objet d'API de jQuery validation.

    OriginalL'auteur Avi Pinto

  5. 0

    Je ne sais pas si c'est ce que vous alliez... mais ne serait pas en train de changer .tenu de le faire .wasReq (comme un espace réservé pour le différencient de celui qui peut-être ne serait pas nécessaire) sur la vérification de la boîte de faire la même chose? Si elle n'est pas cochée, le champ n'est pas nécessaire, vous pouvez également removeClass(nombre) pour éliminer l'erreur.

    Au meilleur de ma connaissance, même si un champ est désactivé, les règles appliquées sont encore, bien appliquée. Sinon, vous pouvez toujours essayer ce...

    //Removes all values from disabled fields upon submit
$(form).submit(function() {
   $(input[type=text][disabled=disabled]).val();
});

    OriginalL'auteur

  6. 0

    Je n'ai pas essayé le plugin validator, mais le fait que le message montre, pour une splitsecond sonne pour moi comme un double bind, comment appelez-vous votre cartable? Si vous liez dans une fonction, essayez de déliaison juste avant de commencer, comme suit:

    $('#ItemList :checkbox').unbind("click");
...Rest of code here...

    OriginalL'auteur Kristoffer Sall-Storgaard

  7. 0

    De ne pas valider le champ après la désactivation/activation de l'?

    jQuery('#ItemList :checkbox').click(function(event) {
        var textBox = jQuery(this).siblings(':text');

        if (!jQuery(this).attr("checked")) {
                textBox.attr('disabled', 'disabled');
                textBox.val('');
        } else {
                textBox.removeAttr('disabled');
                textBox[0].focus();
        }
        textBox.valid();    
});

    OriginalL'auteur Daniel Moura

  8. 0

    J'ai eu exactement le même problème.

    J'ai résolu ce problème en ayant le radio-bouton de changement de gestionnaire d'événement d'appel valide() sur l'ensemble du formulaire.

    Travaillé parfaite. Les autres solutions ci-dessus ne fonctionne pas pour moi.

    OriginalL'auteur drudru