Verwendung hängt mit dem jQuery Validierungs-Plugin

Question

Ich habe ein Formular mit einer Reihe von Textfeldern, die standardmäßig deaktiviert sind, dann aktiviert durch ein Kontrollkästchen neben jedem.

Wenn aktiviert, müssen die Werte in diesen Textfeldern eine gültige Zahl sein, aber wenn sie deaktiviert sind, benötigen sie (natürlich) keinen Wert. Ich verwende das jQuery Validation-Plugin, um diese Validierung durchzuführen, aber es scheint nicht zu tun, was ich erwarte.

Wenn ich das Kontrollkästchen anklicke und das Textfeld deaktiviere, bekomme ich immer noch den ungültigen Feldfehler trotz der depends Klausel, die ich zu den Regeln hinzugefügt habe (siehe Code unten). Seltsamerweise passiert, dass die Fehlermeldung, die für einen Bruchteil einer Sekunde angezeigt wird, dann verschwindet. Hier

ist eine Probe der Liste der Kontrollkästchen & Textfelder:

<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> 

Und hier ist die jQuery-Code Ich bin mit

//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'); 
      } 
     } 
    }); 
}); 

Ignorieren Sie die versteckten Feld in jedem li es ist da, weil Ich benutze asp.net MVC Html.Checkbox Methode.

Answer 1

die „ignore“ Option verwenden (http://docs.jquery.com/Plugins/Validation/validate#toptions) könnte die einfachste Möglichkeit für Sie, sich damit zu befassen. Hängt davon ab, was Sie sonst noch auf dem Formular haben. Das heißt, Sie würden nicht nach deaktivierten Elementen filtern, wenn Sie andere Steuerelemente hätten, die deaktiviert wären, aber aus irgendeinem Grund noch überprüft werden müssten. Wenn diese Route jedoch nicht funktioniert, sollten Sie mit einer zusätzlichen Klasse zum Filtern (Hinzufügen und Entfernen mit Ihren Kontrollkästchen) dahin gelangen, wo Sie hinwollen, aber einfacher.

I.e.

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

Answer 2

Ich weiß nicht, ob dies das war, was Sie für ... wollten, aber nicht geändert .required zu .wasReq (als Platzhalter, um dies von einem zu unterscheiden, der vielleicht nicht erforderlich wäre) beim Überprüfen der Box das gleiche tun? Wenn es nicht markiert ist, ist das Feld nicht erforderlich - Sie können auchClass (Nummer) entfernen, um den Fehler dort zu beseitigen.

Nach meinem Wissen, auch wenn ein Feld deaktiviert ist, werden Regeln, die darauf angewendet werden, immer noch, gut, angewendet. Alternativ können Sie immer versuchen, diese ...

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

Answer 3

I havent die Validator-Plugin versucht, aber die Tatsache, dass die Nachricht für eine Split zeigt klingt für mich wie ein double bind, wie nennst du deine Bindemittel? Wenn Sie in einer Funktion binden versuchen Sie die Entbinderung kurz vor dem Start, wie folgt:

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

Answer 4

Sollte das Feld nach dem Deaktivieren/Aktivieren nicht validiert?

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

Normalerweise, wenn dies zu tun, ich überspringe ‚depends‘ und benutzen Sie einfach die required jQuery Validate Regel und lassen Sie es die Prüfung auf dem angegebenen Selektor Griff basiert, im Gegensatz zu der Logik zwischen den Validate Regeln Aufspalten und dem Kontrollkästchen Klick-Handler. Ich stelle eine quick demo davon, wie ich dies bewerkstelligen kann, mit Ihrem Markup.

Wirklich, es kocht auf required:'#OneSelected:checked'. Dies macht das betreffende Feld nur erforderlich, wenn der Ausdruck wahr ist.Wenn Sie die Seite sofort senden, funktioniert es in der Demo, aber wie Sie Kontrollkästchen aktivieren, kann das Formular nicht übergeben werden, bis die markierten Felder mit einigen Eingaben gefüllt werden. Sie können immer noch einen .valid() Aufruf in den Checkbox-Klick-Handler setzen, wenn das gesamte Formular beim Klick validiert werden soll.

(auch verkürzt ich Ihre Checkbox Makeln ein wenig, Verwendung von jQuery wunderbar chainingmerkmal machen, wenn Ihr „Caching“ zu textBox genauso wirksam ist.)

Answer 6

Hängt Parameter nicht richtig funktioniert, nehme ich an Dokumentation ist veraltet. ich es geschafft, diese Arbeit wie folgt zu erhalten:

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

Answer 7

hatte ich genau das gleiche Problem.

Ich löste dies, indem der radio-button Event-Handler für das gesamte Formular value() aufruft.

Arbeitete perfekt. Die anderen oben genannten Lösungen funktionierten nicht für mich.

Answer 8

@Collin Alle Antwort Folgende:

Das Problem ist, dass, wenn Sie ein Kontrollkästchen deaktivieren, wenn es Fehlermeldung sichtbar ist, wird die Fehlermeldung nicht weggeht.

Ich habe es gelöst durch Entfernen der Fehlermeldung beim Deaktivieren des Feldes.

Demos Collin Nehmen Sie die folgenden Änderungen an der Aktivierung/Deaktivierung Prozess machen:

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

können Sie sehen, ich Mut die Fehlermeldung aus dem Feld zu entfernen, wenn es

deaktivieren Und wenn Sie sich Gedanken über $("form").validate(), nicht! Das Formular wird nicht erneut validiert, sondern nur das API-Objekt der jQuery-Validierung zurückgegeben.