L'utilisation dépend du plugin jQuery Validation

Question

J'ai un formulaire avec un tas de zones de texte désactivées par défaut, puis activées en cochant chacune d'elles.

Lorsqu'elles sont activées, les valeurs dans ces zones de texte doivent être un nombre valide, mais lorsqu'elles sont désactivées, elles n'ont pas besoin d'une valeur (évidemment). J'utilise le plugin jQuery Validation pour faire cette validation, mais il ne semble pas faire ce que j'attends.

Lorsque je clique sur la case à cocher et que je désactive la zone de texte, j'obtiens toujours l'erreur de champ non valide malgré la clause depends que j'ai ajoutée aux règles (voir le code ci-dessous). Curieusement, ce qui se passe réellement est que le message d'erreur s'affiche pendant une fraction de seconde puis disparaît.

Voici un exemple de la liste des cases & 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 J'utilise la méthode Html.Checkbox d'asp.net MVC.

Answer 1

En utilisant l'option « ignorer » (http://docs.jquery.com/Plugins/Validation/validate#toptions) pourrait être la meilleure façon pour vous de traiter cette question. Cela dépend de ce que vous avez d'autre sur le formulaire. Par exemple, vous ne filtreriez pas les éléments désactivés si vous aviez d'autres contrôles désactivés mais que vous deviez valider pour une raison quelconque. Cependant, si cette route ne fonctionne pas, l'utilisation d'une classe supplémentaire pour filtrer (ajouter et supprimer avec vos cases à cocher) devrait vous mener là où vous voulez aller, mais plus facilement.

I.e.

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

Answer 2

Je ne sais pas si c'est ce que vous vouliez ... mais ne changerait pas .requis à .wasReq (comme un espace réservé pour différencier cela de celui qui ne serait peut-être pas nécessaire) sur la vérification de la boîte faire la même chose? Si elle n'est pas cochée, le champ n'est pas requis - vous pouvez également supprimerClass (nombre) pour éliminer l'erreur. Pour autant que je sache, même si un champ est désactivé, les règles qui lui sont appliquées sont toujours, eh bien, appliquées. Sinon, vous pouvez toujours essayer ...

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

Answer 3

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 une fonction, essayez de la désolidariser juste avant de commencer, comme ceci:

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

Answer 4

Ne pas valider le champ après la désactivation/l'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 5

En général, lorsque vous faites cela, je saute « depends » et il suffit d'utiliser la règle jQuery Valider required et le laisser gérer la vérification basée sur le sélecteur donné, par opposition à diviser la logique entre les règles validate et la case à cocher cliquez sur gestionnaire. J'ai mis en place un quick demo de la façon dont j'accomplis cela, en utilisant votre balisage. Vraiment, cela se résume à required:'#OneSelected:checked'. Cela rend le champ en question requis seulement si l'expression est vraie.Dans la démo, si vous soumettez la page immédiatement, cela fonctionne, mais lorsque vous cochez les cases, le formulaire ne peut pas être soumis tant que les champs cochés ne sont pas remplis. Vous pouvez toujours placer un appel .valid() dans le gestionnaire de clic de la case à cocher si vous souhaitez que l'ensemble du formulaire soit validé lors d'un clic.

(Aussi, je raccourcies votre case à cocher basculer un peu, en utilisant fonction de chaînage merveilleux jQuery, si votre « cache » à textBox est tout aussi efficace.)

Answer 6

Depends paramètre ne fonctionne pas correctement, je suppose la documentation est périmée. J'ai réussi à obtenir ce travail comme celui-ci:

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

Answer 7

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

J'ai résolu ce problème en faisant en sorte que le bouton radio modifie l'appel du gestionnaire d'événements valide() sur l'ensemble du formulaire.

A travaillé parfait. Les autres solutions ci-dessus n'ont pas fonctionné pour moi.

Answer 8

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.

Je l'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 tripes supprimer le message d'erreur du champ lors de la désactivation, il

Et si vous vous inquiétez à propos de $("form").validate(), Do not! Il ne revalide pas la forme, il retourne juste l'objet API de la validation jQuery.