L'utilisation dépend avec le plugin de validation jQuery

Question

J'ai une forme avec un tas de zones de texte qui sont désactivées par défaut, rendue possible par l'utilisation d'une case à cocher chacun.

Lorsqu'elle est activée, les valeurs de ces champs de saisie doivent être un nombre valide, mais quand il est désactivé, ils ne nécessitent pas de valeur (évidemment). J'utilise le plug-in de validation jQuery pour faire cette validation, mais il ne semble pas faire ce que je pense.

Lorsque je clique sur la case à cocher et désactiver la zone de texte, je reçois toujours l'erreur de champ non valide malgré la clause depends j'ai ajouté aux règles (voir code ci-dessous). Bizarrement, ce qui se passe en réalité est que le message d'erreur indique une fraction de seconde, puis disparaît.

Voici un exemple de la liste des cases à cocher et 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 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 la méthode de asp.net MVC Html.Checkbox de.

Answer 1

En utilisant l'option "ignorer" ( http://docs.jquery.com/Plugins / validation / validation # toptions ) pourrait être la meilleure façon pour vous de traiter cette question. Cela dépend de ce que vous avez sur le formulaire. Pour savoir que vous ne filtre sur les éléments désactivés si vous aviez d'autres contrôles qui ont été désactivés, mais vous encore besoin de valider pour une raison quelconque. Toutefois, si cette voie ne fonctionne pas, en utilisant une classe supplémentaire pour filtrer (ajout et la suppression de vos cases à cocher) devrait vous rendre où vous voulez aller, mais plus facile.

i.e..

        $('form').validate({
            ignore: ":disabled",
            ...
        });

Answer 2

En général, lorsque vous faites cela, je saute « 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 donné, par opposition à diviser la logique entre les règles de valider et le gestionnaire de clic de case à cocher. Je mets en place un rapide démo de la façon dont je faire, en utilisant votre balisage.

En fait, cela se résume à required:'#OneSelected:checked' . Cela rend le champ en question nécessaire que si l'expression est vraie. Dans la démo, si vous soumettez la page tout de suite, cela fonctionne, mais comme vous des cases à cocher, le formulaire ne parvient pas à présenter jusqu'à ce que les champs sélectionnés sont remplis d'une entrée. Vous pouvez toujours mettre un appel .valid() dans le gestionnaire de clic de case à cocher si vous voulez tout le formulaire pour valider sur clic.

(Aussi, j'écourté votre case à cocher basculer un peu, en utilisant fonctionnalité merveilleux enchaînement de jQuery, si votre « cache » à textBox est tout aussi efficace.)

Answer 3

paramètre dépend ne fonctionne pas correctement, je suppose que la documentation est obsolète. J'ai réussi à obtenir ce travail comme celui-ci:

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

Answer 4

Après @Collin Allen réponse:

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

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

Prenez la démo de Collin et apporter les modifications suivantes à l'activer / désactiver le 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 voir que je cran supprimer le message d'erreur du champ lors de la désactivation, il

Et si vous vous inquiétez au sujet $("form").validate(), Do not! Il ne revalider pas la forme juste renvoie l'objet API de la validation jQuery.

Answer 5

Je ne sais pas si c'est ce que vous allez pour ... mais ne serait pas changeant .required à .wasReq (comme un espace réservé pour différencier ce qui peut-être d'un ne serait pas nécessaire) sur le contrôle de la boîte faire la même chose? Si ce n'est pas cochée, le champ n'est pas nécessaire -. Vous pouvez également removeClass (numéro) pour éliminer l'erreur il y a

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

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

Answer 6

Je n'ai pas essayé le plugin validateur, mais le fait que le message montre une splitsecond me semble un double bind, comment appelez-vous vos classeurs? Si vous liez dans une fonction essayer déliaison juste avant de commencer, comme ceci:

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

Answer 7

Ne devrait pas valider le champ après la désactivation / activation?

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();    
});

Answer 8

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

I résolu ce problème en ayant le gestionnaire événement de changement radio bouton d'appel valide () sur la totalité du formulaire.

A travaillé parfait. Les autres solutions ci-dessus ne fonctionnent pas pour moi.